/* ══════════════════════════════════════
   @LAYER  — 2026 cascade management
══════════════════════════════════════ */
@layer base, layout, components, motion, responsive;

/* ══════════════════════════════════════
   @PROPERTY — animatable custom props
══════════════════════════════════════ */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --grad-pos {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

/* ══════════════════════════════════════
   BASE LAYER
══════════════════════════════════════ */
@layer base {
:root {
  --bg:      #07070a;
  --bg2:     #0d0d11;
  --bg3:     #131317;
  --card:    #0f0f13;
  --card2:   #151519;
  --border:  rgba(255,255,255,.065);
  --gold:    #C8A96B;
  --gold2:   #E0C882;
  --gold3:   #F0DA9E;
  --gd10:    color-mix(in srgb, #C8A96B 10%, transparent);
  --gd18:    color-mix(in srgb, #C8A96B 18%, transparent);
  --gd28:    color-mix(in srgb, #C8A96B 28%, transparent);
  --white:   #F2EDE3;
  --text:    #BAB5AB;
  --muted:   #857F76;
  --muted2:  #363330;
  --sw:      264px;
  --r:       10px;
  --rl:      18px;
  --ease:    cubic-bezier(.4,0,.2,1);
  --spring:  cubic-bezier(0,.7,.3,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden }

body {
  background:var(--bg); color:var(--text);
  font-family:'Sora',sans-serif; font-weight:400; line-height:1.72;
  overflow-x:hidden; max-width:100vw; cursor:none;
}
::selection { background:var(--gold); color:#07070a }
a { color:inherit; text-decoration:none; cursor:pointer }
@media (hover:hover) and (pointer:fine) { a { cursor:none } }
img { display:block; max-width:100% }
button { cursor:pointer; font-family:'Sora',sans-serif }
@media (hover:hover) and (pointer:fine) { button { cursor:none } }

/* reduced motion — accessibility */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .marquee-track { animation:none }
  .ava-ring { animation:none }
  /* ensure splash content stays visible when animations are instant */
  .sp-logo,.sp-sub { opacity:1 !important; transform:none !important }
  .sp-bar          { width:110px !important }
}
} /* end @layer base */

/* ══════════════════════════════════════
   LAYOUT LAYER
══════════════════════════════════════ */
@layer layout {

/* skip link — accessibility */
.skip-link {
  position:fixed; top:-60px; left:1rem; z-index:9999;
  background:var(--gold); color:#07070a; font-weight:600;
  font-size:.78rem; padding:.7rem 1.2rem; border-radius:8px;
  transition:top .2s var(--ease);
}
.skip-link:focus { top:1rem }

/* keyboard focus states — brand-consistent ring, not native outline */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, .tc-dot:focus-visible {
  outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;
}
.soc:focus-visible, .cv-btn:focus-visible, .pr-btn:focus-visible, .pc-view:focus-visible,
.tc-nav-btn:focus-visible, .to-top:focus-visible { outline-offset:2px }

/* scroll progress */
#prog {
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold3));
  z-index:9999; transition:width .04s linear;
  box-shadow:0 0 8px var(--gold);
}

/* back to top */
.to-top {
  position:fixed; right:1.75rem; bottom:1.75rem; z-index:500;
  width:42px; height:42px; border-radius:50%;
  background:var(--card); border:1px solid var(--border); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  cursor:none; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s,
             background .2s, border-color .2s;
}
.to-top.vis { opacity:1; visibility:visible; transform:none }
.to-top:hover { background:var(--gd10); border-color:rgba(200,169,107,.35); transform:translateY(-2px) }
.to-top svg { width:16px; height:16px }

/* grain overlay */
body::after {
  content:''; position:fixed; inset:0;
  pointer-events:none; z-index:9100; opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px;
}

/* cursor */
#cur {
  position:fixed; width:7px; height:7px;
  background:var(--white); border-radius:50%;
  pointer-events:none; z-index:9200;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  transition:width .15s var(--ease), height .15s var(--ease);
  will-change:left,top;
}
#cur-ring {
  position:fixed; width:34px; height:34px;
  border:1px solid rgba(200,169,107,.42); border-radius:50%;
  pointer-events:none; z-index:9199;
  transform:translate(-50%,-50%);
  transition:width .28s var(--ease), height .28s var(--ease), border-color .25s;
  will-change:left,top;
}
#cur.hov   { width:13px; height:13px }
#cur-ring.hov { width:52px; height:52px; border-color:var(--gold) }
#cur.click { transform:translate(-50%,-50%) scale(.6) }

/* splash */
#splash {
  position:fixed; inset:0; background:var(--bg); z-index:8000;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.35rem;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
#splash.exit { opacity:0; transform:scale(1.04); pointer-events:none }
.sp-logo {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.8rem,5vw,3rem); font-weight:300;
  color:var(--white); letter-spacing:.14em;
  opacity:0; animation:fadeUp .65s .1s both;
}
.sp-logo em { font-style:italic; color:var(--gold) }
.sp-bar { width:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); animation:growW .7s .6s both }
.sp-sub { font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); opacity:0; animation:fadeUp .5s 1s both }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes growW  { to{width:110px} }

/* main wrap */
.wrap { display:flex; min-height:100vh }

/* ── SIDEBAR (glassmorphism) ── */
.sidebar {
  position:fixed; top:0; left:0; width:var(--sw); height:100vh;
  background:rgba(13,13,17,.85);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  padding:2rem 1.5rem; z-index:200; overflow-y:auto;
}
.sidebar::-webkit-scrollbar { width:2px }
.sidebar::-webkit-scrollbar-thumb { background:var(--muted2); border-radius:2px }

/* profile */
.prof {
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem;
  padding-bottom:1.75rem; border-bottom:1px solid var(--border); margin-bottom:1.75rem;
}
.ava { position:relative; width:78px; height:78px; margin-bottom:.2rem }
.ava-ring {
  position:absolute; inset:-3px; border-radius:50%;
  background:conic-gradient(var(--gold) 0deg,transparent 80deg,var(--gold2) 210deg,transparent 330deg);
  animation:spinRing 10s linear infinite;
}
@keyframes spinRing { to{transform:rotate(360deg)} }
.ava-inner {
  position:relative; width:78px; height:78px; border-radius:50%;
  overflow:hidden; background:var(--bg3);
  border:3px solid var(--bg2); z-index:1;
}
.ava-inner img { width:100%; height:100%; object-fit:cover }

.avail-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.2);
  border-radius:30px; padding:3px 10px; font-size:.59rem; letter-spacing:.07em; color:#4ade80;
}
.avail-dot { width:5px; height:5px; border-radius:50%; background:#4ade80; box-shadow:0 0 5px rgba(74,222,128,.5); animation:pls 2.5s ease-in-out infinite }
@keyframes pls { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.65)} }

.prof-name { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:500; color:var(--white); letter-spacing:.02em; line-height:1.15 }
.prof-role { font-size:.59rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted) }
.local-time {
  display:flex; align-items:center; gap:5px; margin-top:.55rem;
  font-family:'JetBrains Mono',monospace; font-size:.58rem; color:var(--muted);
  letter-spacing:.02em;
}
.local-time svg { width:11px; height:11px; color:var(--gold); flex-shrink:0 }
.local-time span#localTimeVal { color:var(--text); font-weight:500 }
.cv-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--gd10); border:1px solid rgba(200,169,107,.2);
  color:var(--gold); border-radius:30px; padding:.5rem 1.1rem;
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  transition:background .2s,border-color .2s,transform .2s; width:100%;
}
.cv-btn:hover { background:var(--gd18); border-color:rgba(200,169,107,.4); transform:translateY(-2px) }
.cv-btn svg { width:12px; height:12px }

/* nav */
nav ul { list-style:none; display:flex; flex-direction:column; gap:1px; flex:1; margin-bottom:1rem }
nav a {
  display:flex; align-items:center; gap:9px;
  padding:.53rem .75rem; border-radius:7px;
  font-size:.72rem; letter-spacing:.04em; color:var(--muted);
  position:relative; transition:color .2s,background .2s;
}
nav a:hover,nav a.act { color:var(--white); background:rgba(255,255,255,.035) }
nav a.act { color:var(--gold) }
nav a.act::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:2px; height:52%; background:var(--gold); border-radius:2px;
}
nav svg { width:14px; height:14px; opacity:.6; flex-shrink:0 }

/* socials */
.socials {
  display:flex; gap:7px; justify-content:center;
  padding-top:1.5rem; border-top:1px solid var(--border); margin-top:auto;
}
.soc {
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:color .2s,border-color .2s,background .2s;
}
.soc:hover { color:var(--gold); border-color:rgba(200,169,107,.35); background:var(--gd10) }
.soc svg { width:13px; height:13px }

/* mobile btn */
.mob-btn {
  display:none; position:fixed; top:.85rem; left:.85rem; z-index:300;
  width:38px; height:38px; border-radius:8px;
  background:rgba(13,13,17,.9); backdrop-filter:blur(12px);
  border:1px solid var(--border); color:var(--text);
  align-items:center; justify-content:center;
}

/* main */
.main { margin-left:var(--sw); flex:1; padding:0 4rem }

section {
  padding:5.5rem 0; border-bottom:1px solid var(--border);
  max-width:820px; margin:0 auto; position:relative;
}
section:last-child { border-bottom:none }

/* section bg number — parallax via scroll-driven */
.sec-num {
  position:absolute; right:-1rem; top:3.5rem;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(7rem,18vw,13rem); font-weight:300;
  color:rgba(255,255,255,.016); line-height:1;
  pointer-events:none; user-select:none; letter-spacing:-.04em;
  overflow:hidden; /* prevent self from spilling past positioned parent */
}
@supports (animation-timeline:view()) {
  .sec-num {
    animation:numParallax linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes numParallax {
    from { transform:translateY(-30px) }
    to   { transform:translateY(30px) }
  }
}

} /* end @layer layout */

/* ══════════════════════════════════════
   COMPONENTS LAYER
══════════════════════════════════════ */
@layer components {

/* section header */
.eyebrow {
  font-family:'JetBrains Mono',monospace;
  font-size:.59rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  margin-bottom:.65rem; display:inline-block;
}
.sec-h {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.2rem,4.5vw,3.3rem); font-weight:300;
  color:var(--white); line-height:1.06; margin-bottom:.3rem;
}
.sec-h em { font-style:italic; color:var(--gold) }
.sec-rule { width:40px; height:1px; background:var(--gold); opacity:.5; margin:1rem 0 2.5rem }

/* ── ABOUT hero headline ── */
.hero-hl {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.5rem,5.5vw,4.4rem); font-weight:300;
  color:var(--white); line-height:1.04; margin-bottom:2.5rem; letter-spacing:-.01em;
}
.hero-hl em { font-style:italic; color:var(--gold) }
.lw { overflow:hidden; display:block }
.ln {
  display:block; transform:translateY(108%); opacity:0;
  animation:lineUp .85s var(--spring) forwards;
}
.ln:nth-child(2) { animation-delay:.1s }
.ln:nth-child(3) { animation-delay:.2s }
@keyframes lineUp { to{transform:none;opacity:1} }

/* ── STATS ROW ── */
.stats-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--rl);
  overflow:hidden; margin-bottom:1.5rem;
}
.stat-cell {
  background:var(--card); padding:1.35rem 1rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  transition:background .25s;
}
.stat-cell:hover { background:var(--card2) }
.stat-num {
  font-family:'Cormorant Garamond',serif; font-weight:300; color:var(--gold);
  font-size:clamp(1.9rem,3vw,2.5rem); line-height:1;
}
.stat-lbl {
  font-family:'JetBrains Mono',monospace; font-size:.56rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
}

/* ── BENTO GRID ── */
.bento {
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; margin-bottom:3.5rem;
}
.bn { background:var(--card); padding:1.35rem 1.5rem; transition:background .25s; position:relative }
.bn:hover { background:var(--card2) }
.bn-bio   { grid-column:1/6; grid-row:1/2; padding:1.75rem 2rem }
.bn-bio p { font-size:.87rem; line-height:1.85; color:var(--text); margin-bottom:.75rem }
.bn-bio p:last-child { margin-bottom:0 }
.bn-bio em { color:var(--white); font-style:normal }
.bn-cert  { grid-column:1/2; grid-row:2/3; display:flex; align-items:center; gap:.7rem }
.bn-goog  { grid-column:2/3; grid-row:2/3; display:flex; align-items:center; gap:.7rem }
.bn-meta  { grid-column:3/4; grid-row:2/3; display:flex; align-items:center; gap:.7rem }
.bn-bcs   { grid-column:4/5; grid-row:2/3; display:flex; align-items:center; gap:.7rem }
.bn-wf    { grid-column:5/6; grid-row:2/3; display:flex; align-items:center; gap:.7rem }
.bn-ico {
  width:34px; height:34px; border-radius:8px; background:var(--gd10);
  border:1px solid rgba(200,169,107,.15); display:flex; align-items:center;
  justify-content:center; color:var(--gold); flex-shrink:0;
}
.bn-ico svg { width:15px; height:15px }
.bn-mt  { font-size:.74rem; font-weight:500; color:var(--white); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bn-ms  { font-size:.63rem; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }



/* ── SERVICES numbered list ── */
.svc-list { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; background:var(--border) }
.svc-row {
  display:flex; align-items:center; gap:1.35rem;
  background:var(--card); padding:1.4rem 1.65rem;
  transition:background .25s; position:relative; overflow:hidden;
}
.svc-row::after {
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:linear-gradient(90deg,var(--gold),transparent); transition:width .4s var(--ease);
}
.svc-row:hover { background:var(--card2) }
.svc-row:hover::after { width:100% }
.svc-n { font-family:'JetBrains Mono',monospace; font-size:.62rem; color:var(--muted2); letter-spacing:.08em; flex-shrink:0; width:20px }
.svc-ico2 {
  width:35px; height:35px; border-radius:8px; background:var(--gd10);
  border:1px solid rgba(200,169,107,.14); display:flex; align-items:center;
  justify-content:center; color:var(--gold); flex-shrink:0;
}
.svc-ico2 svg { width:15px; height:15px }
.svc-info { flex:1 }
.svc-info h3 { font-family:'Cormorant Garamond',serif; font-size:1.08rem; font-weight:500; color:var(--white); margin-bottom:.2rem }
.svc-info p  { font-size:.75rem; line-height:1.65; color:var(--muted) }
.svc-arrow   { color:var(--muted2); transition:color .2s,transform .25s var(--spring); flex-shrink:0; font-size:.9rem }
.svc-row:hover .svc-arrow { color:var(--gold); transform:translateX(5px) }

/* ── SKILLS marquee ── */
.marquee-wrap { overflow:hidden; margin-bottom:3rem; position:relative }
.marquee-wrap::before,.marquee-wrap::after {
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.marquee-wrap::before { left:0; background:linear-gradient(90deg,var(--bg),transparent) }
.marquee-wrap::after  { right:0; background:linear-gradient(270deg,var(--bg),transparent) }
.marquee-track { display:flex; gap:9px; width:max-content; animation:marquee 32s linear infinite; padding:3px 0 }
.marquee-track:hover { animation-play-state:paused }
@keyframes marquee { to{transform:translateX(-50%)} }
.m-pill {
  font-size:.68rem; padding:.33rem .88rem; border-radius:30px;
  border:1px solid var(--border); color:var(--text); background:var(--card); white-space:nowrap;
  transition:color .2s,border-color .2s;
}
.m-pill.hi { border-color:var(--border); color:var(--text); background:var(--card) }

/* skill cats */
.sk-cats { display:flex; flex-direction:column; gap:2rem }
.sk-lbl  { font-family:'JetBrains Mono',monospace; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); padding-bottom:.55rem; border-bottom:1px solid var(--border); margin-bottom:.85rem }
.pills   { display:flex; flex-wrap:wrap; gap:6px }
.pill    { font-size:.69rem; padding:.33rem .88rem; border-radius:30px; border:1px solid var(--border); color:var(--text); background:var(--card); transition:color .2s,border-color .2s,background .2s; cursor:default }
.pill:hover { color:var(--gold); border-color:rgba(200,169,107,.28); background:var(--gd10) }
.pill.hi    { border-color:rgba(200,169,107,.2); color:var(--gold2); background:rgba(200,169,107,.07) }

/* ── TIMELINE (Experience) ── */
.tl-lbl { display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:2.5rem 0 1.35rem }
.tl-lbl:first-of-type { margin-top:0 }
.tl-lbl svg { width:12px; height:12px }
.tl { position:relative; padding-left:1.3rem; border-left:1px solid var(--border); margin-bottom:1.5rem }
.tl-i { position:relative; padding:0 0 2.15rem 1.35rem }
.tl-i:last-child { padding-bottom:0 }
.tl-i::before {
  content:''; position:absolute; left:-1.38rem; top:5px;
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  border:2px solid var(--bg); box-shadow:0 0 0 3px rgba(200,169,107,.12);
}
.tl-i.current::before { background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.14) }
.tl-current-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.2);
  border-radius:30px; padding:2px 9px; font-size:.56rem; letter-spacing:.08em; text-transform:uppercase;
  color:#4ade80; margin-bottom:.5rem;
}
.tl-current-dot { width:5px; height:5px; border-radius:50%; background:#4ade80; box-shadow:0 0 5px rgba(74,222,128,.5); animation:pls 2.5s ease-in-out infinite }
.tl-date  { font-family:'JetBrains Mono',monospace; font-size:.58rem; color:var(--muted); letter-spacing:.04em; margin-bottom:.3rem }
.tl-title { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:500; color:var(--white); margin-bottom:.15rem }
.tl-org   { font-size:.72rem; color:var(--gold); opacity:.85; margin-bottom:.45rem }
.tl-desc  { font-size:.78rem; line-height:1.75; color:var(--text) }

/* ── PORTFOLIO ── */
.pf-filters { display:flex; gap:6px; margin-bottom:2rem; flex-wrap:wrap }
.fbtn {
  font-size:.65rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.38rem .98rem; border-radius:30px;
  border:1px solid var(--border); background:transparent; color:var(--muted);
  transition:all .2s;
}
.fbtn:hover,.fbtn.act { border-color:rgba(200,169,107,.35); color:var(--gold); background:var(--gd10) }

/* uniform 2-column grid — no featured, no wide */
.pf-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem }

.pc {
  background:var(--card); border:1px solid var(--border); border-radius:var(--rl);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .3s, transform .4s var(--spring);
  position:relative;
  /* spotlight vars */
  --mx:50%; --my:50%;
}
.pc::before {
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:1; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx) var(--my), rgba(200,169,107,.07), transparent 70%);
  opacity:0; transition:opacity .3s;
}
.pc:hover { border-color:rgba(200,169,107,.22); transform:translateY(-5px) }
.pc:hover::before { opacity:1 }

/* card thumbnail */
.pc-thumb {
  position:relative; aspect-ratio:16/10; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.pc-bg { position:absolute; inset:0; transition:transform .6s var(--ease) }
.pc:hover .pc-bg { transform:scale(1.04) }

/* CSS grid pattern on all thumbnails */
.pc-pattern {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:28px 28px;
}

/* card number badge */
.pc-badge {
  position:absolute; top:.7rem; right:.8rem; z-index:3;
  font-family:'JetBrains Mono',monospace;
  font-size:.55rem; letter-spacing:.12em; color:rgba(255,255,255,.2);
}


/* ── BROWSER / APP MOCKUP THUMBNAILS ── */
.pcm-wrap {
  position:relative; z-index:2;
  width:84%; max-width:215px;
  transform:perspective(900px) rotateX(5deg);
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.65));
}
.pcm {
  background:rgba(12,12,16,.94);
  border:1px solid rgba(255,255,255,.13);
  border-radius:7px; overflow:hidden; width:100%;
}
.pcm-bar {
  display:flex; align-items:center; gap:5px;
  padding:5px 7px;
  background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.pcm-dots { display:flex; gap:3px }
.pcm-dots s { display:block; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.18); text-decoration:none }
.pcm-addr { flex:1; height:5px; background:rgba(255,255,255,.08); border-radius:3px }
.pcm-ui { padding:6px; display:flex; flex-direction:column; gap:4px }

/* nav row */
.pcm-nav { display:flex; align-items:center; gap:3px; padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,.06) }
.pcm-logo { width:24px; height:6px; border-radius:2px; background:var(--pa) }
.pcm-nls { display:flex; gap:3px; margin-left:auto }
.pcm-nl { width:16px; height:4px; border-radius:2px; background:rgba(255,255,255,.14) }
.pcm-nl.hi { background:var(--pa); width:22px }

/* lines */
.pcm-l { height:4px; border-radius:2px; background:rgba(255,255,255,.12) }
.pcm-l.h { height:7px; background:rgba(255,255,255,.5) }
.pcm-l.a { background:var(--pa) }
.pcm-l.w9 { width:90% } .pcm-l.w8 { width:80% } .pcm-l.w7 { width:70% }
.pcm-l.w5 { width:50% } .pcm-l.w3 { width:35% } .pcm-l.w6 { width:60% }

/* hero image block */
.pcm-hero { height:32px; border-radius:4px; background:var(--pd); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden }
.pcm-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--pa) 0%,transparent 60%); opacity:.18 }

/* button */
.pcm-btn { height:11px; width:52px; border-radius:6px; background:var(--pa) }

/* cards row */
.pcm-row { display:flex; gap:3px }
.pcm-c { flex:1; border-radius:3px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08) }
.pcm-c.t3 { height:24px } .pcm-c.t2 { height:16px } .pcm-c.t4 { height:32px }

/* stat cards */
.pcm-stat { flex:1; height:22px; border-radius:3px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:2px }
.pcm-sn { width:20px; height:5px; border-radius:2px; background:var(--pa) }
.pcm-sl { width:28px; height:3px; border-radius:2px; background:rgba(255,255,255,.1) }

/* bar chart */
.pcm-chart { height:26px; border-radius:3px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); display:flex; align-items:flex-end; padding:3px 4px; gap:3px }
.pcm-bi { border-radius:2px 2px 0 0; background:var(--pa) }

/* sidebar dash */
.pcm-dash { display:flex; height:100% }
.pcm-dsb { width:26px; background:rgba(255,255,255,.04); border-right:1px solid rgba(255,255,255,.06); padding:5px 3px; display:flex; flex-direction:column; gap:4px; align-items:center }
.pcm-di { width:14px; height:5px; border-radius:2px; background:rgba(255,255,255,.14) }
.pcm-di.a { background:var(--pa) }
.pcm-dm { flex:1; padding:5px; display:flex; flex-direction:column; gap:3px }

/* product cards */
.pcm-prod { flex:1; border-radius:3px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); overflow:hidden }
.pcm-prod-img { height:18px; background:var(--pd) }
.pcm-prod-info { padding:3px 4px; display:flex; flex-direction:column; gap:2px }
.pcm-prod-n { height:4px; border-radius:2px; background:rgba(255,255,255,.3); width:80% }
.pcm-prod-p { height:4px; border-radius:2px; background:var(--pa); width:50% }

/* phone frame */
.pcm-phone {
  width:82px; position:relative; z-index:2;
  background:rgba(12,12,16,.94);
  border:1.5px solid rgba(255,255,255,.16); border-radius:16px;
  overflow:hidden; padding:5px;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.65));
}
.pcm-notch { width:30px; height:5px; background:rgba(255,255,255,.1); border-radius:3px; margin:0 auto 4px }
.pcm-phead { background:var(--pd); border-radius:4px; padding:4px; display:flex; align-items:center; gap:3px; margin-bottom:3px }
.pcm-ptitle { flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.45) }
.pcm-pitem { display:flex; align-items:center; gap:3px; padding:3px 2px; border-bottom:1px solid rgba(255,255,255,.05) }
.pcm-pav { width:10px; height:10px; border-radius:50%; background:var(--pa); flex-shrink:0 }
.pcm-ptxt { flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.15) }
.pcm-pchk { width:8px; height:8px; border-radius:2px; background:var(--pa); flex-shrink:0 }
.pcm-pchk.x { background:rgba(255,255,255,.1) }
.pcm-pbar { height:5px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; margin-top:3px }
.pcm-pfill { height:100%; border-radius:3px; background:var(--pa) }
/* glowing orb on thumbnail */
.pc-orb {
  position:absolute; z-index:1; pointer-events:none;
  border-radius:50%; filter:blur(40px); opacity:.35;
}

.pc-thumb-body {
  position:relative; z-index:2; text-align:center; padding:.85rem;
}
.pc-tt { font-family:'JetBrains Mono',monospace; font-size:.52rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.32); margin-bottom:.35rem }
.pc-tn { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:400; color:rgba(255,255,255,.86); text-shadow:0 2px 20px rgba(0,0,0,.5) }
.pc-tl { width:22px; height:1px; background:rgba(255,255,255,.16); margin:.6rem auto }
.pc-tu { font-family:'JetBrains Mono',monospace; font-size:.5rem; color:rgba(255,255,255,.22); letter-spacing:.07em }

.pc-overlay {
  position:absolute; inset:0; z-index:4;
  background:rgba(7,7,10,.55);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .28s;
}
.pc:hover .pc-overlay { opacity:1 }
.pc-view {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--gold); color:#07070a;
  font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.55rem 1.25rem; border-radius:30px;
  transition:background .2s,transform .2s;
}
.pc-view:hover { background:var(--gold2); transform:scale(1.04) }

.pc-body { padding:1.1rem 1.3rem 1.3rem; z-index:2; position:relative; display:flex; flex-direction:column; flex:1 }
.pc-tag  { font-family:'JetBrains Mono',monospace; font-size:.53rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:.38rem }
.pc-name { font-family:'Cormorant Garamond',serif; font-size:1.02rem; font-weight:500; color:var(--white); margin-bottom:.28rem }
.pc-desc { font-size:.74rem; line-height:1.66; color:var(--muted); flex:1 }

/* tech stack tags */
.pc-stack {
  display:flex; flex-wrap:wrap; gap:4px;
  margin-top:.75rem; padding-top:.75rem;
  border-top:1px solid var(--border);
}
.pc-stack span {
  font-family:'JetBrains Mono',monospace;
  font-size:.52rem; letter-spacing:.08em;
  padding:2px 7px; border-radius:4px;
  background:var(--gd10); color:var(--gold);
  border:1px solid rgba(200,169,107,.14);
}

/* ── TESTIMONIALS — horizontal scroll ── */
.tc-outer { position:relative }

.tc-scroll {
  display:flex; gap:1rem; overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none;
  padding-bottom:.25rem;
  width:100%;
  -webkit-overflow-scrolling:touch;
}
.tc-scroll::-webkit-scrollbar { display:none }

.tc {
  width:calc(50% - .5rem); flex-shrink:0;
  scroll-snap-align:start;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--rl); padding:1.5rem;
  transition:border-color .3s;
  position:relative;
  --mx:50%; --my:50%;
}
.tc::before {
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none;
  background:radial-gradient(220px circle at var(--mx) var(--my),rgba(200,169,107,.055),transparent 70%);
  opacity:0; transition:opacity .3s;
}
.tc:hover { border-color:rgba(200,169,107,.16) }
.tc:hover::before { opacity:1 }

.tc-stars { color:var(--gold); font-size:.7rem; letter-spacing:.12em; margin-bottom:.8rem; position:relative; z-index:1 }
.tc-q     { font-family:'Cormorant Garamond',serif; font-size:2.6rem; color:var(--gold); opacity:.15; line-height:.52; display:block; margin-bottom:.65rem; position:relative; z-index:1 }
.tc-text  { font-size:.79rem; line-height:1.78; color:var(--text); font-style:italic; margin-bottom:1.1rem; position:relative; z-index:1 }
.tc-author { display:flex; align-items:center; gap:8px; position:relative; z-index:1 }
.tc-av   { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:600; letter-spacing:.04em; flex-shrink:0 }
.tc-name { font-size:.74rem; font-weight:500; color:var(--white) }
.tc-role { font-size:.63rem; color:var(--muted); margin-top:1px }

/* dots */
.tc-controls { display:flex; align-items:center; justify-content:center; gap:.85rem; margin-top:1.4rem }
.tc-dots { display:flex; align-items:center; gap:6px }
.tc-dot  { width:5px; height:5px; border-radius:30px; background:var(--muted2); cursor:none; transition:background .25s,width .25s; border:none; padding:0 }
.tc-dot.act { background:var(--gold); width:18px }
.tc-dot:hover { background:var(--muted) }

.tc-nav-btn {
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:var(--card);
  color:var(--muted); display:flex; align-items:center; justify-content:center;
  cursor:none; flex-shrink:0;
  transition:color .2s, border-color .2s, background .2s, transform .2s;
}
.tc-nav-btn svg { width:15px; height:15px; pointer-events:none }
.tc-nav-btn:hover {
  color:var(--gold); border-color:rgba(200,169,107,.38);
  background:var(--gd10); transform:scale(1.08);
}
.tc-nav-btn:active { transform:scale(.92) }

/* ── PRICING ── */
.process-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; margin-bottom:3.5rem }
.ps { background:var(--card); padding:1.65rem; transition:background .25s }
.ps:hover { background:var(--card2) }
.ps-n  { font-family:'JetBrains Mono',monospace; font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.9rem; display:block }
.ps-t  { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:500; color:var(--white); margin-bottom:.4rem }
.ps-d  { font-size:.75rem; line-height:1.72; color:var(--muted) }

.pr-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--rl); overflow:hidden;
  margin-bottom:1.25rem;
}
.pr {
  background:var(--card); padding:2rem 1.7rem;
  display:flex; flex-direction:column;
  transition:background .25s; position:relative; overflow:hidden;
  --mx:50%; --my:50%;
}
.pr::before {
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(200,169,107,.06),transparent 70%);
  opacity:0; transition:opacity .3s;
}
.pr:hover { background:var(--card2) }
.pr:hover::before { opacity:1 }

/* featured pricing card — @property animated border */
.pr.featured {
  background:var(--card2);
  border-left:1px solid transparent;
  border-right:1px solid transparent;
  --angle:0deg;
  background-image:linear-gradient(var(--card2),var(--card2)),
    conic-gradient(from var(--angle),transparent 20%,var(--gold) 40%,var(--gold2) 50%,var(--gold) 60%,transparent 80%);
  background-origin:border-box;
  background-clip:padding-box,border-box;
  animation:borderSpin 7s linear infinite;
}
.pr.featured::after { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),var(--gold2),var(--gold),transparent) }
@keyframes borderSpin { to{--angle:360deg} }

.pr-popular {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--gd18); border:1px solid rgba(200,169,107,.25);
  border-radius:30px; padding:3px 9px;
  font-family:'JetBrains Mono',monospace;
  font-size:.51rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1.2rem; width:fit-content; position:relative; z-index:1;
}
.pr-popular::before { content:'★'; font-size:.48rem }
.pr-spacer { height:28px; margin-bottom:1.2rem }
.pr-plan  { font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.55rem; display:block; position:relative; z-index:1 }
.pr-price { font-family:'Cormorant Garamond',serif; font-size:2.7rem; font-weight:300; color:var(--white); line-height:1; margin-bottom:.2rem; position:relative; z-index:1 }
.pr-price sup { font-size:1.1rem; vertical-align:super; color:var(--gold); font-weight:400 }
.pr-price span { font-size:.95rem; color:var(--muted); font-weight:300 }
.pr-tagline { font-size:.71rem; color:var(--muted); margin-bottom:1.4rem; line-height:1.55; border-bottom:1px solid var(--border); padding-bottom:1.4rem; position:relative; z-index:1 }
.pr-features { display:flex; flex-direction:column; gap:.55rem; flex:1; margin-bottom:1.65rem; position:relative; z-index:1 }
.pr-f { display:flex; align-items:flex-start; gap:.55rem; font-size:.74rem; line-height:1.5 }
.pr-f.yes { color:var(--text) }
.pr-f.no  { color:var(--muted2) }
.pr-chk   { width:13px; height:13px; flex-shrink:0; margin-top:1px }
.pr-chk.y { color:var(--gold) }
.pr-chk.n { color:var(--muted2) }
.pr-btn {
  display:flex; align-items:center; justify-content:center; gap:7px;
  border-radius:30px; padding:.68rem 1.2rem;
  font-size:.69rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  transition:all .2s; text-align:center;
  border:1px solid var(--border); color:var(--text); background:transparent;
  cursor:none; font-family:'Sora',sans-serif; position:relative; z-index:1;
}
.pr-btn:hover { border-color:rgba(200,169,107,.35); color:var(--gold); background:var(--gd10) }
.pr-btn.gold  { background:var(--gold); color:#07070a; border-color:var(--gold) }
.pr-btn.gold:hover { background:var(--gold2); border-color:var(--gold2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(200,169,107,.22) }


.pr-note { font-size:.74rem; color:var(--muted); text-align:center; border-top:1px solid var(--border); padding-top:1.5rem; margin-top:.5rem }
.pr-note strong { color:var(--text) }

/* ── FAQ accordion ── */
.faq-list { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; background:var(--border); gap:1px; margin-top:2.5rem }
.faq-item { background:var(--card); transition:background .25s }
.faq-item:hover { background:var(--card2) }
.faq-item summary {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.5rem; cursor:none; list-style:none;
  font-family:'Sora',sans-serif; font-size:.85rem; font-weight:500; color:var(--white);
}
.faq-item summary::-webkit-details-marker { display:none }
.faq-ic {
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:var(--gd10); border:1px solid rgba(200,169,107,.2); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:400; line-height:1;
  transition:transform .3s var(--ease), background .25s;
}
.faq-item[open] .faq-ic { transform:rotate(135deg); background:var(--gold); color:#07070a }
.faq-item p {
  margin:0 1.5rem 1.35rem; padding-right:2.2rem;
  font-size:.79rem; line-height:1.75; color:var(--text);
  animation:faqIn .3s var(--ease);
}
@keyframes faqIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }

/* ── CONTACT ── */
.cc-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:2.5rem }
.cc {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:.95rem 1.1rem; display:flex; align-items:center; gap:.82rem;
  transition:border-color .2s,background .2s,transform .2s;
}
.cc:hover { border-color:rgba(200,169,107,.25); background:var(--card2); transform:translateY(-2px) }
.cc-ico { width:33px; height:33px; flex-shrink:0; border-radius:8px; background:var(--gd10); border:1px solid rgba(200,169,107,.14); display:flex; align-items:center; justify-content:center; color:var(--gold) }
.cc-ico svg { width:14px; height:14px }
.cc-lbl { font-size:.57rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:1px }
.cc-val { font-size:.76rem; color:var(--white) }

/* floating label form — 2026 pattern */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem }

.fg {
  position:relative; margin-bottom:.9rem;
}
.fg input, .fg textarea {
  width:100%;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:1.25rem 1rem .45rem;
  color:var(--white); font-family:'Sora',sans-serif; font-size:.83rem;
  outline:none; transition:border-color .25s;
}
.fg textarea { padding-top:1.5rem; height:132px; resize:vertical }
.fg input:focus, .fg textarea:focus { border-color:rgba(200,169,107,.4) }

/* floating label */
.fg label {
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  font-size:.78rem; color:var(--muted);
  transition:top .2s var(--ease), font-size .2s, color .2s, transform .2s, letter-spacing .2s;
  pointer-events:none; font-family:'Sora',sans-serif;
}
.fg textarea ~ label { top:.9rem; transform:none }

/* label floats up when focused or filled */
.fg input:focus ~ label,
.fg input:not(:placeholder-shown) ~ label {
  top:.38rem; transform:none;
  font-size:.56rem; color:var(--gold);
  letter-spacing:.12em; text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;
}
.fg textarea:focus ~ label,
.fg textarea:not(:placeholder-shown) ~ label {
  top:.38rem; font-size:.56rem; color:var(--gold);
  letter-spacing:.12em; text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;
}

/* :has() — highlight row when any input inside is focused */
.form-row:has(input:focus),
.fg:has(textarea:focus) {
  --border-glow:rgba(200,169,107,.18);
}

.btn-send {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold); color:#07070a;
  font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.8rem 1.9rem; border-radius:30px; border:none;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.btn-send:hover { background:var(--gold2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(200,169,107,.24) }
.btn-send svg { width:13px; height:13px }
.form-ok { display:none; text-align:center; padding:2.5rem; background:var(--card); border:1px solid rgba(74,222,128,.16); border-radius:var(--rl); font-family:'Cormorant Garamond',serif; font-size:1.3rem; color:#4ade80; letter-spacing:.04em }

} /* end @layer components */

/* ══════════════════════════════════════
   MOTION LAYER — scroll-driven + reveal
══════════════════════════════════════ */
@layer motion {

/* JS fallback (all browsers) */
.rev {
  opacity:0; transform:translateY(22px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.rev.vis { opacity:1; transform:none }
.rev:nth-child(2) { transition-delay:.07s }
.rev:nth-child(3) { transition-delay:.13s }
.rev:nth-child(4) { transition-delay:.19s }
.rev:nth-child(5) { transition-delay:.25s }
.rev:nth-child(6) { transition-delay:.31s }
.rev:nth-child(7) { transition-delay:.37s }

/* CSS scroll-driven (2025+ enhancement) */
@supports (animation-timeline:view()) {
  .rev {
    animation:scrollReveal linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 28%;
    transition:none;
  }
  @keyframes scrollReveal {
    from { opacity:0; transform:translateY(22px) }
    to   { opacity:1; transform:none }
  }
}

/* scrollbar */
::-webkit-scrollbar { width:3px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--muted2); border-radius:3px }

} /* end @layer motion */

/* ══════════════════════════════════════
   RESPONSIVE LAYER — comprehensive mobile
══════════════════════════════════════ */
@layer responsive {
/* Tablet 901-1100px — handled here.
   Everything ≤ 900px is handled by mobile.css (no @layer, loads after this file). */

@media (max-width:1100px) {
  .main { padding:0 2.5rem }
}

@media (max-width:960px) {
  .main    { padding:0 2rem }
  section  { padding:4rem 0 }
  .stats-row { grid-template-columns:1fr 1fr }
  .bento   { grid-template-columns:1fr 1fr }
  .bn-bio  { grid-column:1/3; grid-row:1/2 }
  .bn-cert { grid-column:1/2; grid-row:2/3 }
  .bn-goog { grid-column:2/3; grid-row:2/3 }
  .bn-meta { grid-column:1/2; grid-row:3/4 }
  .bn-bcs  { grid-column:2/3; grid-row:3/4 }
  .bn-wf   { grid-column:1/3; grid-row:4/5 }
  .pf-grid       { grid-template-columns:1fr }
  .pr-grid       { grid-template-columns:1fr }
  .process-steps { grid-template-columns:1fr }
  .pr.featured {
    border-left:none; border-right:none; border-top:1px solid transparent;
    background-image:linear-gradient(var(--card2),var(--card2)),
      conic-gradient(from var(--angle),transparent 20%,var(--gold) 40%,var(--gold2) 50%,var(--gold) 60%,transparent 80%);
    background-origin:border-box; background-clip:padding-box,border-box;
  }
  .tc      { width:calc(80% - .5rem) }
  /* prevent sec-num from triggering horizontal scroll on tablet */
  .sec-num { right:0; overflow:hidden }
}

} /* end @layer responsive */

/*
 * mobile.css — Rahim Dad Azimi Portfolio
 * Completely separate from style.css / @layer system.
 * No @layer used here → these rules beat all layered styles.
 * !important used deliberately to defeat JS inline styles & layer cascade.
 * Load this AFTER style.css.
 */

/* ═══════════════════════════════════════════
   SHARED BASE — applies to all mobile widths
   ≤ 900px
═══════════════════════════════════════════ */
@media screen and (max-width: 900px) {

  /* ── Global overflow fix ── */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* ── Disable custom cursor (touch devices don't need it) ── */
  body         { cursor: auto !important; }
  #cur,
  #cur-ring    { display: none !important; }
  a, button    { cursor: pointer !important; }

  /* ── SPLASH: make content immediately visible.
        The CSS animation has opacity:0 as start state; on many
        mobile browsers the fill-mode never resolves correctly.
        On mobile we skip the animation entirely and show instantly. ── */
  #splash {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.2rem !important;
    background: #07070a !important;
  }
  .sp-logo {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(1.6rem, 6vw, 2.4rem) !important;
    font-weight: 300 !important;
    color: #F2EDE3 !important;
    letter-spacing: .12em !important;
  }
  .sp-logo em { color: #C8A96B !important; font-style: italic !important; }
  .sp-bar {
    width: 100px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, #C8A96B, transparent) !important;
    animation: none !important;
  }
  .sp-sub {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    font-size: .58rem !important;
    letter-spacing: .28em !important;
    text-transform: uppercase !important;
    color: #6A6660 !important;
  }

  /* ── SIDEBAR: off-canvas drawer, hidden until .open ── */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(280px, 80vw) !important;
    height: 100vh !important;
    transform: translateX(-110%) !important;
    transition: transform .3s ease !important;
    z-index: 800 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    background: rgba(13,13,17,.97) !important;
    backdrop-filter: blur(20px) !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 12px 0 60px rgba(0,0,0,.75) !important;
  }

  /* ── HAMBURGER: always on screen ── */
  .mob-btn {
    display: flex !important;
    position: fixed !important;
    top: .7rem !important;
    left: .7rem !important;
    z-index: 900 !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: rgba(13,13,17,.92) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── MAIN: full width, top padding for hamburger ── */
  .wrap {
    display: block !important;
    width: 100% !important;
  }
  .main {
    margin-left: 0 !important;
    padding: 4.5rem 1.1rem 3rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex: none !important;
  }

  /* ── SECTIONS: clip absolute children, reasonable padding ── */
  section {
    padding: 2.5rem 0 !important;
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }
  section:last-child { border-bottom: none !important; }

  /* ── SECTION BG NUMBERS: hidden — they extend past viewport ── */
  .sec-num { display: none !important; }

  /* ── TYPOGRAPHY ── */
  .hero-hl {
    font-size: clamp(1.55rem, 7.5vw, 2.3rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 1.75rem !important;
    word-break: break-word !important;
  }
  .sec-h {
    font-size: clamp(1.45rem, 6.5vw, 2rem) !important;
    word-break: break-word !important;
  }
  .sec-rule { margin: .6rem 0 1.5rem !important; }

  /* ── STATS ROW ── */
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
    margin-bottom: 1.1rem !important;
  }
  .stat-cell { padding: 1rem .6rem !important; gap: .2rem !important; }
  .stat-num  { font-size: 1.65rem !important; }
  .stat-lbl  { font-size: .52rem !important; letter-spacing: .06em !important; }

  /* ── BENTO: bio full width, certs in 2 cols, credentials wrap ── */
  .bento {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
    margin-bottom: 2rem !important;
  }
  .bn-bio  { grid-column: 1 / 3 !important; grid-row: 1 / 2 !important; padding: 1.2rem !important; }
  .bn-cert { grid-column: 1 / 2 !important; grid-row: 2 / 3 !important; }
  .bn-goog { grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; }
  .bn-meta { grid-column: 1 / 2 !important; grid-row: 3 / 4 !important; }
  .bn-bcs  { grid-column: 2 / 3 !important; grid-row: 3 / 4 !important; }
  .bn-wf   { grid-column: 1 / 3 !important; grid-row: 4 / 5 !important; }
  .bn-bio p { font-size: .82rem !important; line-height: 1.75 !important; }
  .bn-mt    { font-size: .7rem !important; white-space: normal !important; }
  .bn-ms    { font-size: .6rem !important; }
  .bn { padding: 1rem .9rem !important; }
  .bn-bio.bn { padding: 1.2rem !important; }

  /* ── EXPERIENCE timeline ── */
  .tl-title { font-size: 1rem !important; }
  .tl-desc  { font-size: .74rem !important; }

  /* ── FAQ accordion ── */
  .faq-item summary { padding: 1rem 1.1rem !important; font-size: .8rem !important; gap: .75rem !important; }
  .faq-item p { margin: 0 1.1rem 1.1rem !important; padding-right: 1.4rem !important; font-size: .75rem !important; }
  .faq-ic { width: 20px !important; height: 20px !important; }

  /* ── BACK TO TOP: smaller, clear of thumb-safe edge ── */
  .to-top {
    right: 1.1rem !important;
    bottom: 1.1rem !important;
    width: 38px !important;
    height: 38px !important;
  }

  /* ── SERVICES ── */
  .svc-row { padding: 1rem 1.1rem !important; gap: .85rem !important; flex-wrap: nowrap !important; }
  .svc-info h3 { font-size: .95rem !important; }
  .svc-info p  { font-size: .72rem !important; line-height: 1.6 !important; }

  /* ── PORTFOLIO: single column ── */
  .pf-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .pc-thumb { aspect-ratio: 16 / 9 !important; }

  /* ── PORTFOLIO MOCKUP: no 3D perspective (causes paint overflow) ── */
  .pcm-wrap {
    transform: none !important;
    width: 80% !important;
    max-width: 200px !important;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)) !important;
  }
  /* neutralise JS inline tilt transforms */
  .pc { transform: none !important; }
  .pc:hover { transform: translateY(-4px) !important; transition: transform .3s ease !important; }

  /* ── TESTIMONIALS ── */
  .tc {
    width: calc(88% - .5rem) !important;
    flex-shrink: 0 !important;
    padding: 1.2rem !important;
  }
  .tc-text { font-size: .76rem !important; }
  .tc-scroll { -webkit-overflow-scrolling: touch !important; }

  /* ── PRICING: single column ── */
  .pr-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
  .process-steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
  .pr { padding: 1.5rem 1.25rem !important; }
  .pr-price { font-size: 2.4rem !important; }
  .pr.featured {
    border-left: none !important;
    border-right: none !important;
  }
  .ps { padding: 1.2rem !important; }

  /* ── CONTACT: single column ── */
  .cc-grid  { grid-template-columns: 1fr !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .cc { padding: .85rem 1rem !important; }
  .cc-val { font-size: .72rem !important; word-break: break-all !important; }

  /* ── FORM ── */
  .fg input,
  .fg textarea { font-size: .82rem !important; }
  .fg textarea  { height: 120px !important; }
  .btn-send { width: 100% !important; justify-content: center !important; }
}


/* ═══════════════════════════════════════════
   SMALL PHONES  ≤ 480px
═══════════════════════════════════════════ */
@media screen and (max-width: 480px) {

  .main { padding: 4rem .85rem 3rem !important; }

  /* headline scaling */
  .hero-hl { font-size: clamp(1.35rem, 8.5vw, 1.75rem) !important; }
  .sec-h   { font-size: clamp(1.25rem, 8vw, 1.6rem) !important; }

  /* stats row: fully single column */
  .stats-row { grid-template-columns: 1fr 1fr !important; }
  .stat-num  { font-size: 1.5rem !important; }

  /* bento: fully single column */
  .bento { grid-template-columns: 1fr !important; }
  .bn-bio,
  .bn-cert,
  .bn-goog,
  .bn-meta,
  .bn-bcs,
  .bn-wf {
    grid-column: 1 / 2 !important;
    grid-row: auto !important;
  }
  .bn-bio p { font-size: .79rem !important; }

  /* faq: tighten further */
  .faq-item summary { font-size: .77rem !important; padding: .9rem 1rem !important; }

  /* services: hide decorative elements to save space */
  .svc-n     { display: none !important; }
  .svc-arrow { display: none !important; }
  .svc-info h3 { font-size: .9rem !important; }
  .svc-info p  { font-size: .7rem !important; }

  /* testimonials */
  .tc { width: calc(93% - .5rem) !important; padding: 1rem !important; }
  .tc-q    { font-size: 1.9rem !important; }
  .tc-text { font-size: .73rem !important; }
  .tc-name { font-size: .7rem !important; }
  .tc-role { font-size: .59rem !important; }

  /* pricing */
  .pr      { padding: 1.2rem 1rem !important; }
  .pr-price { font-size: 2.1rem !important; }
  .pr-f    { font-size: .7rem !important; }
  .pr-btn  { font-size: .64rem !important; }

  /* contact */
  .cc-ico      { width: 28px !important; height: 28px !important; }
  .cc-ico svg  { width: 12px !important; height: 12px !important; }
  .cc-lbl      { font-size: .52rem !important; }
  .cc-val      { font-size: .69rem !important; }

  /* mockup smaller */
  .pcm-wrap { max-width: 170px !important; width: 76% !important; }

  /* marquee */
  .m-pill { font-size: .63rem !important; padding: .27rem .7rem !important; }
}


/* ═══════════════════════════════════════════
   VERY SMALL  ≤ 360px
═══════════════════════════════════════════ */
@media screen and (max-width: 360px) {
  .main    { padding: 3.75rem .65rem 2.5rem !important; }
  .hero-hl { font-size: 1.28rem !important; }
  .sec-h   { font-size: 1.22rem !important; }
  .bn-bio p { font-size: .76rem !important; }
  .svc-info h3 { font-size: .85rem !important; }
  .pr-price { font-size: 1.9rem !important; }
  .tc-text  { font-size: .7rem !important; }
  .cc-val   { font-size: .65rem !important; }
}