*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0a0c10;--bg2:#111318;--bg3:#181c24;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.14);
  --text:#f0f2f7;--muted:#8891a8;
  --accent:#4af0b8;--accent2:#1a9e75;
  --accent-dim:rgba(74,240,184,0.08);--accent-dim2:rgba(74,240,184,0.16);
  --card-bg:#111318;--nav-bg:rgba(10,12,16,0.88);
  --mono:'Space Mono',monospace;--sans:'DM Sans',sans-serif;
  --iris:#8b7cf6;--coral:#f0824a;
}
[data-theme="light"]{
  --bg:#f5f6f8;--bg2:#ffffff;--bg3:#eceef2;
  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.14);
  --text:#0f1117;--muted:#5a6278;
  --accent:#0f7a5a;--accent2:#0a5c43;
  --accent-dim:rgba(15,122,90,0.08);--accent-dim2:rgba(15,122,90,0.15);
  --card-bg:#ffffff;--nav-bg:rgba(245,246,248,0.92);
  --iris:#6a4fd6;--coral:#c2551f;
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.7;overflow-x:hidden;transition:background 0.3s,color 0.3s}
a{color:inherit}
img{max-width:100%;display:block}

/* ---------- Nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:1rem 2.5rem;background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom:0.5px solid var(--border);gap:1rem}
.nav-left{display:flex;align-items:center;gap:14px}
.nav-logo-mark{width:32px;height:32px;flex-shrink:0}
.nav-brand{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:0.08em;text-decoration:none}
.nav-right{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.nav-links{display:flex;gap:1.6rem;list-style:none}
.nav-links a{font-size:13px;color:var(--muted);text-decoration:none;letter-spacing:0.03em;transition:color 0.2s}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a.active{color:var(--accent)}
.theme-toggle{background:transparent;border:0.5px solid var(--border2);border-radius:3px;padding:5px 9px;cursor:pointer;color:var(--muted);font-size:14px;line-height:1;transition:all 0.2s}
.theme-toggle:hover{color:var(--text);border-color:var(--accent2)}
.nav-cta{font-family:var(--mono);font-size:11px;color:var(--accent);border:0.5px solid var(--accent2);padding:6px 14px;border-radius:3px;text-decoration:none;transition:background 0.2s;white-space:nowrap;letter-spacing:0.04em}
.nav-cta:hover{background:var(--accent-dim)}
.nav-menu-btn{display:none;background:transparent;border:0.5px solid var(--border2);border-radius:3px;padding:6px 10px;color:var(--text);cursor:pointer;font-size:16px}

@media(max-width:820px){
  .nav-links{display:none}
  .nav-menu-btn{display:block}
  .nav-links.mobile-open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom:0.5px solid var(--border);padding:1.2rem 1.5rem;gap:1rem}
}

/* ---------- Hero ---------- */
.hero{min-height:88vh;display:flex;align-items:center;padding:9rem 2.5rem 5rem;position:relative;overflow:hidden}
.hero.compact{min-height:auto;padding:8.5rem 2.5rem 4rem}
.parallax-layer{position:absolute;inset:0;will-change:transform;pointer-events:none}
.hero-grid{background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 20%,transparent 80%)}
.hero-glow{background:radial-gradient(ellipse,rgba(74,240,184,0.07) 0%,transparent 65%);top:15%;left:40%;width:700px;height:350px}
[data-theme="light"] .hero-glow{background:radial-gradient(ellipse,rgba(15,122,90,0.06) 0%,transparent 65%)}
.hero-content{position:relative;max-width:820px}
.eyebrow{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:1.5rem;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:'';display:inline-block;width:24px;height:1px;background:var(--accent)}
h1{font-family:var(--mono);font-size:clamp(2rem,5vw,3.6rem);font-weight:700;line-height:1.12;margin-bottom:1.5rem;letter-spacing:-0.02em}
h1 span{color:var(--accent)}
.hero-sub{font-size:1.05rem;color:var(--muted);max-width:560px;margin-bottom:2.5rem;line-height:1.85}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.btn-primary{font-family:var(--mono);font-size:12px;background:var(--accent);color:#04342c;padding:11px 26px;border-radius:3px;text-decoration:none;letter-spacing:0.05em;font-weight:700;transition:opacity 0.2s;border:none;cursor:pointer;display:inline-block}
[data-theme="light"] .btn-primary{color:#ffffff}
.btn-primary:hover{opacity:0.85}
.btn-outline{font-family:var(--mono);font-size:12px;background:transparent;color:var(--text);padding:11px 26px;border-radius:3px;text-decoration:none;letter-spacing:0.05em;border:0.5px solid var(--border2);transition:all 0.2s;cursor:pointer;display:inline-block}
.btn-outline:hover{border-color:var(--accent2);background:var(--accent-dim)}
.btn-sm{padding:8px 18px;font-size:11px}

/* ---------- Stats ---------- */
.stats-bar{background:var(--bg2);border-top:0.5px solid var(--border);border-bottom:0.5px solid var(--border);padding:2rem 2.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:2rem}
.stat{text-align:center}
.stat-num{font-family:var(--mono);font-size:1.7rem;color:var(--accent);display:block;margin-bottom:0.25rem}
.stat-label{font-size:11px;color:var(--muted);letter-spacing:0.07em;text-transform:uppercase}

/* ---------- Sections ---------- */
.section-inner{padding:5rem 2.5rem;max-width:1100px;margin:0 auto}
.section-inner.narrow{max-width:760px}
.section-tag{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:0.8rem;display:flex;align-items:center;gap:10px}
.section-tag::before{content:'';width:18px;height:1px;background:var(--accent);display:inline-block}
h2{font-family:var(--mono);font-size:clamp(1.5rem,3vw,2.3rem);font-weight:700;line-height:1.2;margin-bottom:1rem;letter-spacing:-0.02em}
h3{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:0.01em}
.section-desc{color:var(--muted);max-width:600px;margin-bottom:3rem;font-size:15px}
.bg-alt{background:var(--bg2);border-top:0.5px solid var(--border);border-bottom:0.5px solid var(--border)}

/* ---------- Services ---------- */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--border);border:0.5px solid var(--border);border-radius:8px;overflow:hidden}
.service-card{background:var(--card-bg);padding:2rem;transition:background 0.2s}
.service-card:hover{background:var(--bg3)}
.service-icon{width:34px;height:34px;margin-bottom:1.2rem;opacity:0.85}
.service-card h3{margin-bottom:0.7rem}
.service-card p{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:1.1rem}
.service-tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-family:var(--mono);font-size:10px;color:var(--accent);background:var(--accent-dim);border:0.5px solid rgba(74,240,184,0.18);padding:3px 8px;border-radius:2px;letter-spacing:0.04em}
[data-theme="light"] .tag{border-color:rgba(15,122,90,0.2)}

/* ---------- Process ---------- */
.process-list{display:flex;flex-direction:column;gap:0}
.process-item{display:grid;grid-template-columns:56px 1fr;gap:1.5rem;padding:1.6rem 0;border-bottom:0.5px solid var(--border)}
.process-item:last-child{border-bottom:none}
.process-num{font-family:var(--mono);font-size:1.4rem;color:var(--accent);opacity:0.6}
.process-item h3{margin-bottom:0.4rem}
.process-item p{font-size:14px;color:var(--muted)}

/* ---------- Apps ---------- */
.apps-teaser{background:var(--bg2);border-top:0.5px solid var(--border);border-bottom:0.5px solid var(--border);padding:3.5rem 2.5rem}
.apps-inner{max-width:1100px;margin:0 auto}
.app-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;margin-top:2rem}
.app-card{background:var(--card-bg);border:0.5px solid var(--border2);border-radius:10px;padding:2rem;transition:border-color 0.2s,transform 0.2s;display:flex;flex-direction:column;gap:1rem}
.app-card:hover{border-color:var(--accent2);transform:translateY(-2px)}
.app-card-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.app-glyph{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:16px;flex-shrink:0}
.app-glyph.agenda{background:rgba(74,240,184,0.14);color:var(--accent)}
.app-glyph.snapnote{background:rgba(139,124,246,0.14);color:var(--iris)}
.app-status{font-family:var(--mono);font-size:10px;padding:4px 10px;border-radius:20px;border:0.5px solid var(--border2);color:var(--muted);letter-spacing:0.05em;display:flex;align-items:center;gap:6px;white-space:nowrap}
.pill-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
.app-card h3{font-size:17px;margin-bottom:0.2rem}
.app-tagline{font-family:var(--mono);font-size:12px;color:var(--muted)}
.app-card p{font-size:14px;color:var(--muted);line-height:1.7}
.app-feature-list{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0.4rem 0}
.app-feature-list li{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:flex-start}
.app-feature-list li::before{content:'→';color:var(--accent);flex-shrink:0}
.app-card-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:0.6rem}
.app-domain{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ---------- About visual ---------- */
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
@media(max-width:700px){.about-layout{grid-template-columns:1fr}}
.about-text p{color:var(--muted);margin-bottom:1rem;font-size:15px}
.cert-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:1.5rem}
.cert-item{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.cert-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
.about-visual{background:var(--bg2);border:0.5px solid var(--border);border-radius:8px;padding:1.8rem;font-family:var(--mono);font-size:12px;color:var(--muted);line-height:2}
.code-key{color:#4a8cf0}.code-str{color:var(--accent)}.code-num{color:#f0b04a}.code-bracket{color:var(--muted)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}.cursor{display:inline-block;width:7px;height:13px;background:var(--accent);margin-left:2px;vertical-align:middle;animation:blink 1.1s infinite}

/* ---------- Booking / Contact ---------- */
.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem}
@media(max-width:640px){.booking-grid{grid-template-columns:1fr}}
.booking-card{background:var(--card-bg);border:0.5px solid var(--border2);border-radius:8px;padding:2rem;transition:border-color 0.2s,background 0.2s}
.booking-card:hover{border-color:var(--accent2);background:var(--bg3)}
.booking-card h3{margin-bottom:0.6rem}
.booking-card p{font-size:14px;color:var(--muted);margin-bottom:1.4rem;line-height:1.7}
.booking-badge{font-family:var(--mono);font-size:10px;color:var(--accent);background:var(--accent-dim);border:0.5px solid rgba(74,240,184,0.18);padding:3px 10px;border-radius:2px;display:inline-block;margin-bottom:1rem;letter-spacing:0.06em}
.booking-form,.contact-wrapper{background:var(--card-bg);border:0.5px solid var(--border);border-radius:8px;padding:2.5rem;margin-top:1rem}
.contact-wrapper{max-width:640px}
.booking-form h3{margin-bottom:1.5rem}
.form-fields{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:580px){.form-row{grid-template-columns:1fr}}
select,input,textarea{width:100%;background:var(--bg3);border:0.5px solid var(--border2);border-radius:4px;padding:10px 14px;font-family:var(--sans);font-size:14px;color:var(--text);outline:none;transition:border-color 0.2s;appearance:none}
select{cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:0.7}
input:focus,select:focus,textarea:focus{border-color:var(--accent2)}
textarea{resize:vertical;min-height:100px}
.contact-info{margin-top:1.8rem;display:flex;flex-direction:column;gap:9px}
.contact-row{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.contact-row a{color:var(--accent);text-decoration:none}
.form-note{font-size:12px;color:var(--muted);margin-top:0.8rem}

/* ---------- Footer ---------- */
footer{border-top:0.5px solid var(--border);padding:2.2rem 2.5rem;background:var(--bg)}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:2rem}
.footer-left{display:flex;align-items:center;gap:12px}
.footer-brand{font-family:var(--mono);font-size:13px;color:var(--accent)}
.footer-links{display:flex;gap:1.5rem;list-style:none;font-size:13px}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--text)}
.footer-meta{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right;line-height:1.8}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.hero-content>*{animation:fadeUp 0.6s ease both}
.hero-eyebrow-delay{animation-delay:0.1s}

@media(max-width:700px){
  nav{padding:0.9rem 1.2rem}
  .section-inner{padding:3.5rem 1.2rem}
  .hero{padding:7.5rem 1.2rem 4rem}
  .stats-bar,.apps-teaser{padding:1.5rem 1.2rem}
  footer{padding:1.5rem 1.2rem}
  .footer-inner{flex-direction:column}
  .footer-meta{text-align:left}
}