/* Glass Bento Portfolio Template. Glass design system.
   Primitives (.glass .frost .orb .blob) carry the look; the component classes
   below keep every page laid out the same way. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#F6F0FF;color:#2A1B3D;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;margin:0;color:#2A1B3D}
p{margin:0}
img,svg{max-width:100%}
img{display:block}
a{color:#2A1B3D}a:hover{color:#3350DC}
button{font-family:inherit}
::selection{background:#FFD34D;color:#2A1B3D}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #3350DC;outline-offset:3px;border-radius:8px}

/* ---------- primitives ---------- */
.glass{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(74,48,120,.05),0 22px 54px rgba(74,48,120,.12)}
.frost{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 18px 44px rgba(30,20,90,.26)}
.orb{display:block;border-radius:50%;background-image:radial-gradient(circle at 32% 26%,rgba(255,255,255,.98) 0,rgba(255,255,255,.9) 5%,rgba(255,255,255,.3) 20%,rgba(255,255,255,.06) 52%,rgba(255,255,255,.22) 78%,rgba(255,255,255,.55) 100%);box-shadow:inset 0 -10px 24px rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.6),0 18px 36px rgba(40,24,100,.22);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.blob{position:absolute;border-radius:50%;pointer-events:none}
.win{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 6px rgba(42,27,61,.10),0 26px 60px rgba(30,20,90,.30)}

/* ---------- page shell ---------- */
.page{position:relative;overflow-x:clip;background:linear-gradient(180deg,#EDEFFF 0%,#F8EEFF 22%,#FFF0E8 48%,#FFEDF2 72%,#EEF0FF 100%)}
.blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:16px clamp(16px,3vw,32px) 0;display:flex;flex-direction:column}
.sec{padding-top:clamp(72px,9vw,112px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:32px}
.sec-head>div{display:flex;flex-direction:column;gap:12px;max-width:720px}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#2A3FA8}
.eyebrow.light{color:#FFE27A}
.h1{font-size:clamp(44px,6vw,84px);line-height:1.02;letter-spacing:-.045em;font-weight:600}
.h2{font-size:clamp(34px,4.4vw,56px);line-height:1.04;letter-spacing:-.04em;font-weight:500}
.h3{font-size:24px;line-height:1.15;letter-spacing:-.025em;font-weight:600}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:#3A2B4E}
.body{font-size:16px;line-height:1.65;color:#3A2B4E}
.small{font-size:14px;line-height:1.55;color:#4A3A5C}
.grad-text{background:linear-gradient(90deg,#FFE27A,#FFB98A);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- buttons, pills, tags ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:13px 24px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:translate .2s ease,box-shadow .2s ease}
.btn:hover{translate:0 -2px}
.btn-dark{background:#2A1B3D;color:#FFF0E4}.btn-dark:hover{color:#fff}
.btn-light{background:#fff;color:#2A1B3D;box-shadow:0 14px 30px rgba(20,16,80,.28)}.btn-light:hover{color:#2A1B3D}
.btn-glass{background:rgba(255,255,255,.75);border-color:rgba(255,255,255,.95);color:#2A1B3D}.btn-glass:hover{color:#2A1B3D}
.btn-ondark{background:rgba(30,22,90,.36);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:rgba(255,255,255,.55);color:#fff}.btn-ondark:hover{color:#fff}
.arr{transition:translate .25s ease}
.btn:hover .arr,.link:hover .arr{translate:4px 0}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;text-decoration:none;color:#2A1B3D}
.pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:6px 13px;border-radius:999px;font-size:13px;font-weight:600}
.pill-blue{background:rgba(76,111,255,.14);color:#2A3FA8}
.pill-yellow{background:rgba(255,211,77,.42);color:#5A4100}
.pill-orange{background:rgba(255,122,47,.18);color:#7A3208}
.pill-green{background:#E3F5EB;color:#136B43}
.dot{width:9px;height:9px;border-radius:50%;background:#1F9D63;animation:pulse 1.8s ease-out infinite}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95);font-size:13px;font-weight:500;color:#2A1B3D}

/* ---------- nav ---------- */
.nav{position:sticky;top:12px;z-index:20;align-self:center;width:100%;max-width:860px;border-radius:28px;padding:8px 8px 8px 22px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#2A1B3D;padding:8px 0}
.brand-mark{width:28px;height:28px;border-radius:9px;background:linear-gradient(140deg,#3B5BEA,#7A5CE6);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:20px;line-height:1}
.brand-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.01em}
.nav-right{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav-links{display:contents}
.nav-links a{padding:12px 14px;font-weight:500;font-size:15px;text-decoration:none;color:#3A2B4E;border-radius:999px}
.nav-links a[aria-current="page"]{color:#2A1B3D;font-weight:700;background:rgba(255,255,255,.7)}
.nav-cta{margin-left:6px;min-height:44px;padding:11px 20px}
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:1px solid rgba(255,255,255,.95);border-radius:999px;background:rgba(255,255,255,.72);color:#2A1B3D;cursor:pointer}
.nav-toggle .i-close{display:none}
.nav-toggle[aria-expanded="true"] .i-open{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:block}
@keyframes navIn{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
@media (max-width:759px){
  .nav{padding-left:16px}
  .nav-right{display:contents}
  .brand{margin-right:auto;gap:8px}
  .brand-name{font-size:16px}
  .nav-cta{order:2;margin-left:0;padding:9px 14px;font-size:14px;white-space:nowrap}
  .nav-toggle{display:flex;order:3}
  .nav-links{display:none;order:4;flex-basis:100%;flex-direction:column;padding:4px 0 6px;border-top:1px solid rgba(42,27,61,.12)}
  .nav.open .nav-links{display:flex;animation:navIn .22s ease-out}
  .nav-links a{display:block;padding:14px}
}

/* ---------- cards & grids ---------- */
.card{border-radius:32px}
.pad{padding:clamp(22px,3vw,36px)}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.tile{transition:translate .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.tile:hover{translate:0 -6px}
.glass.tile:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(74,48,120,.06),0 36px 80px rgba(74,48,120,.2)}
.zoom{transition:scale .6s cubic-bezier(.2,.7,.2,1)}
.tile:hover .zoom{scale:1.03}

/* gradient panels */
.panel{position:relative;overflow:hidden;border-radius:28px}
.g-blue{background:linear-gradient(135deg,#2F47CF 0%,#5B4FDB 38%,#8E6BE8 68%,#F08A6B 100%)}
.g-warm{background:linear-gradient(135deg,#FFE27A 0%,#FFC24D 34%,#FF9A52 70%,#F2707A 100%)}
.g-sunset{background:linear-gradient(135deg,#FF9A52 0%,#F2707A 38%,#B068DD 70%,#6B5FE0 100%)}
.g-hero{background:linear-gradient(118deg,#2A3FC4 0%,#4B45D1 30%,#7A4FD6 54%,#E8697A 78%,#FF9A52 92%,#FFD34D 100%)}
.ghost{position:absolute;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;line-height:1;letter-spacing:-.05em;white-space:nowrap;color:rgba(255,255,255,.06);-webkit-text-stroke:1.5px rgba(255,255,255,.24);pointer-events:none}

/* ---------- home hero ---------- */
.hero{position:relative;overflow:hidden;border-radius:40px;color:#fff;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:40px;padding:clamp(28px,5vw,64px);box-shadow:0 30px 80px rgba(60,50,170,.28);min-height:600px}
.hero h1{color:#fff}
.hero .lead{color:#F1EEFF;max-width:500px}
.hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:26px}
.hero-photo{position:relative;z-index:1;display:flex;justify-content:center}
.photo-frame{position:relative;width:100%;max-width:340px;aspect-ratio:4/5;border-radius:32px;overflow:hidden;rotate:3deg;border:1.5px solid rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 30px 70px rgba(20,16,80,.35);background:rgba(255,255,255,.18)}
.photo-frame img{width:100%;height:100%;object-fit:cover}
.photo-cap{position:absolute;left:14px;right:14px;bottom:14px;border-radius:18px;padding:12px 16px;display:flex;flex-direction:column;gap:2px;color:#2A1B3D}
.photo-cap b{font-size:16px}
.photo-cap span{font-size:13px;color:#4A3A5C}
@media (max-width:860px){.hero{grid-template-columns:minmax(0,1fr);min-height:0}.photo-frame{max-width:300px}}

/* ---------- live demo (Loom to Tasks) ---------- */
.demo{width:100%;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 6px rgba(42,27,61,.1),0 26px 60px rgba(30,20,90,.3);color:#2A1B3D}
.demo-bar{display:flex;align-items:center;gap:6px;padding:11px 16px;background:#F4EEE7;border-bottom:1px solid #E6DCD0}
.demo-bar i{width:11px;height:11px;border-radius:50%;display:block}
.demo-bar b{flex:1;text-align:center;font-size:13px;font-weight:600;color:#4A3A5C}
.demo-live{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;background:#fff;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.demo-live::before{content:'';width:7px;height:7px;border-radius:50%;background:#E5484D;animation:rec 1.2s ease-in-out infinite}
.demo-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.demo-col{padding:18px;display:flex;flex-direction:column;gap:12px;min-height:300px}
.demo-col+.demo-col{border-left:1px solid #EFE8DF;background:#FFFCF8}
.demo-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6B5E7B}
.line{display:flex;gap:9px;font-size:14px;line-height:1.45}
.av{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.av-c{background:#FFD34D}.av-d{background:#C9D3FF}
.who{display:block;font-size:11px;color:#6B5E7B}
.track{margin-top:auto;height:5px;border-radius:3px;background:rgba(42,27,61,.1);overflow:hidden}
.track span{display:block;height:100%;width:100%;border-radius:3px;background:linear-gradient(90deg,#4C6FFF,#8E7BFF,#FF7A2F)}
.out{display:flex;align-items:center;gap:10px;padding:11px 13px;background:#fff;border:1px solid #EFE8DF;border-radius:12px;font-size:14px;font-weight:600}
.out .t{flex:1;min-width:0}
.chk{flex:none;width:16px;height:16px;border-radius:5px;border:2px solid #C9BDD8}
.chip{padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.chip-b{background:#E6EBFF;color:#2A3FA8}.chip-y{background:#FFF4CC;color:#6B4E00}
.out-dec{background:#FFF9E3;border-color:#F1E2A8}
.saved{align-self:flex-start;margin-top:auto;display:flex;align-items:center;gap:8px;padding:7px 13px;background:#2A1B3D;color:#FFF0E4;border-radius:999px;font-size:12px;font-weight:600}
@keyframes s1{0%,3%{opacity:0;transform:translateY(8px)}8%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s2{0%,11%{opacity:0;transform:translateY(8px)}16%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s3{0%,19%{opacity:0;transform:translateY(8px)}24%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s4{0%,27%{opacity:0;transform:translateY(8px)}32%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s5{0%,50%{opacity:0;transform:translateY(8px)}55%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s6{0%,58%{opacity:0;transform:translateY(8px)}63%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s7{0%,66%{opacity:0;transform:translateY(8px)}71%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s8{0%,76%{opacity:0;transform:scale(.92)}81%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes scan{0%,33%{width:0}48%,92%{width:100%}100%{width:100%;opacity:0}}
.s1{animation:s1 10s ease infinite}.s2{animation:s2 10s ease infinite}.s3{animation:s3 10s ease infinite}.s4{animation:s4 10s ease infinite}
.s5{animation:s5 10s ease infinite}.s6{animation:s6 10s ease infinite}.s7{animation:s7 10s ease infinite}.s8{animation:s8 10s ease infinite}
.track span{animation:scan 10s ease infinite}
@media (max-width:720px){.demo-body{grid-template-columns:minmax(0,1fr)}.demo-col{min-height:0}.demo-col+.demo-col{border-left:0;border-top:1px solid #EFE8DF}}

/* ---------- project cards (home + work) ---------- */
.proj{border-radius:36px;padding:14px;display:flex;flex-direction:column;gap:6px}
.proj-visual{position:relative;overflow:hidden;border-radius:24px;padding:clamp(18px,3vw,36px);display:flex;align-items:center;justify-content:center}
.proj-copy{padding:clamp(14px,2.4vw,26px);display:flex;flex-direction:column;gap:14px;flex:1}
.proj-copy .btn{align-self:flex-start;margin-top:auto}
.proj-wide{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;align-items:stretch}
.proj-wide .proj-visual{order:2;min-height:420px}
.result{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;color:#2A1B3D;font-weight:600}
.result svg{flex:none;margin-top:2px}
@media (max-width:900px){.proj-wide{grid-template-columns:minmax(0,1fr)}.proj-wide .proj-visual{order:0;min-height:0}}

/* screenshot frames */
.browser{width:100%;background:#fff;border-radius:14px;overflow:hidden}
.browser-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#F4EEE7;border-bottom:1px solid #E6DCD0}
.browser-bar i{width:9px;height:9px;border-radius:50%;display:block;background:#D8CDC0}
.browser-bar span{flex:1;margin-left:8px;padding:3px 10px;background:#fff;border-radius:999px;font-size:11px;color:#6B5E7B}
.browser img{width:100%;height:auto}
.phone{width:100%;max-width:240px;border-radius:26px;padding:7px;background:#2A1B3D;box-shadow:0 26px 60px rgba(20,16,80,.38)}
.phone img{width:100%;height:auto;border-radius:20px}

/* mini dashboard (Lead Tracker) */
.dash{width:100%;color:#2A1B3D}
.dash-body{padding:16px;display:flex;flex-direction:column;gap:14px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{padding:10px 12px;border:1px solid #EFE8DF;border-radius:12px;display:flex;flex-direction:column;gap:2px}
.kpi span{font-size:11px;color:#6B5E7B}.kpi b{font-family:'Bricolage Grotesque',sans-serif;font-size:24px}
.bars{display:flex;align-items:flex-end;gap:8px;height:110px;border-bottom:1px solid #E6DCD0;background:repeating-linear-gradient(to top,transparent 0,transparent 26px,#F4EEE7 26px,#F4EEE7 27px)}
.bars span{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#A9B8FF,#D5DCFF);transform-origin:bottom;animation:grow .9s cubic-bezier(.2,.7,.2,1) backwards}
.bars span.hi{background:linear-gradient(180deg,#3350DC,#7A5CE6)}
.days{display:flex;gap:8px;font-size:10px;color:#6B5E7B;text-align:center}.days span{flex:1}
.flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.flow-step{padding:12px 18px;border-radius:14px;font-weight:600;font-size:14px}
.flow-arrow{color:#7A5CE6}

/* ---------- services ---------- */
.svc{border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:14px}
.svc-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 22px rgba(42,27,61,.16)}
.i-blue{background:linear-gradient(140deg,#3350DC,#7A5CE6)}
.i-orange{background:linear-gradient(140deg,#FF9A52,#E8697A)}
.i-yellow{background:linear-gradient(140deg,#FFD34D,#FF9A52);color:#2A1B3D}
.i-green{background:linear-gradient(140deg,#2BB673,#1F8F7A)}
.svc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.svc li{display:flex;gap:10px;font-size:15px;line-height:1.45;color:#3A2B4E}
.svc li svg{flex:none;margin-top:3px}
.svc .link{margin-top:auto;padding-top:6px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{display:flex;flex-direction:column;gap:12px}
.step-n{display:flex;align-items:center;gap:12px}
.step-n b{flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:700;color:#fff}
.step-n i{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(76,111,255,.45),rgba(255,122,47,.45))}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;border-radius:36px;color:#fff;padding:clamp(32px,5vw,68px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;box-shadow:0 30px 80px rgba(60,50,170,.28)}
.cta h2{color:#fff}
.cta p{font-size:18px;line-height:1.6;color:#F1EEFF;max-width:520px}

/* ---------- case study ---------- */
.case-head{display:flex;flex-direction:column;gap:18px;padding-top:40px}
.back{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;text-decoration:none;color:#3A2B4E;padding:6px 0}
.meta{border-radius:24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.meta>div{padding:20px 24px;display:flex;flex-direction:column;gap:4px;border-left:1px solid rgba(42,27,61,.1)}
.meta>div:first-child{border-left:0}
.meta>div>span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5A4B6E}
.meta b{font-size:16px;font-weight:600}
@media (max-width:860px){.meta{grid-template-columns:repeat(2,minmax(0,1fr))}.meta>div:nth-child(3){border-left:0}.meta>div:nth-child(n+3){border-top:1px solid rgba(42,27,61,.1)}}
.case-visual{position:relative;overflow:hidden;border-radius:36px;padding:clamp(22px,5vw,72px);display:flex;align-items:center;justify-content:center;box-shadow:0 30px 80px rgba(60,50,170,.24);margin-top:20px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:24px;align-items:start}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}
.ba{border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:14px}
.ba-row{display:flex;gap:12px;font-size:15px;line-height:1.5}
.ba-row svg{flex:none;margin-top:2px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(40px,4.2vw,58px);line-height:1;letter-spacing:-.04em}
.stat span{display:block;margin-top:8px;font-size:15px;line-height:1.4;color:#F1EEFF}
.shot{border-radius:28px;padding:14px;display:flex;flex-direction:column;gap:12px}
.shot figcaption{padding:0 10px 8px;font-size:14px;color:#3A2B4E}
.shot-box{border-radius:20px;overflow:hidden;padding:clamp(14px,2.5vw,26px);display:flex;align-items:center;justify-content:center}
figure{margin:0}

/* ---------- about ---------- */
.timeline{display:flex;flex-direction:column}
.t-item{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;padding:26px 0;border-top:1px solid rgba(42,27,61,.12)}
.t-item:first-child{border-top:0;padding-top:4px}
.t-when{font-size:14px;font-weight:700;color:#5A4B6E;padding-top:4px}
.t-what{display:flex;flex-direction:column;gap:6px}
.t-what h3{font-size:21px;letter-spacing:-.02em}
.t-org{font-size:15px;font-weight:600;color:#2A3FA8}
@media (max-width:640px){.t-item{grid-template-columns:minmax(0,1fr);gap:6px}}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:600}
.field input,.field textarea{width:100%;padding:15px 18px;font:inherit;font-size:16px;color:#2A1B3D;background:rgba(255,255,255,.9);border:1px solid rgba(42,27,61,.16);border-radius:14px}
.field input:focus,.field textarea:focus{border-color:#3350DC;outline:none;box-shadow:0 0 0 3px rgba(51,80,220,.18)}
.field textarea{resize:vertical;line-height:1.5;min-height:150px}
.copy-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid rgba(42,27,61,.16);background:#fff;font-size:13px;font-weight:600;color:#2A1B3D;cursor:pointer}

/* ---------- footer ---------- */
.foot{padding:64px 0 36px}
.foot-in{border-radius:36px;padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column;gap:28px}
.foot-cols{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
.foot-col{display:flex;flex-direction:column;gap:2px;min-width:140px}
.foot-col>span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5A4B6E;padding-bottom:8px}
.foot-col a{padding:6px 0;font-size:15px;text-decoration:none;color:#3A2B4E}
.socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.socials a{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);font-size:14px;font-weight:600;text-decoration:none;color:#2A1B3D}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-top:22px;border-top:1px solid rgba(42,27,61,.12);font-size:14px;color:#3A2B4E}

/* ---------- motion ---------- */
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.pop{animation:pop .8s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,157,99,.45)}100%{box-shadow:0 0 0 10px rgba(31,157,99,0)}}
@keyframes rec{50%{opacity:.25}}
@keyframes floatA{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,40px)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(36px,-30px)}}
.fa{animation:floatA 16s ease-in-out infinite}
.fb{animation:floatB 13s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.bob{animation:bob 6s ease-in-out infinite}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){.rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 28%}}
.par{transition:translate .6s cubic-bezier(.2,.7,.2,1)}
.p1{translate:calc(var(--mx,0)*10px) calc(var(--my,0)*10px)}
.p2{translate:calc(var(--mx,0)*-18px) calc(var(--my,0)*-18px)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .pop,.dot,.fa,.fb,.bob,.rv,.bars span,.demo-live::before,.nav.open .nav-links{animation:none}
  .s1,.s2,.s3,.s4,.s5,.s6,.s7,.s8,.track span{animation:none;opacity:1;transform:none}
  .tile,.zoom,.btn,.arr,.par{transition:none}
  .p1,.p2{translate:none}
}

/* --- layout refinements --- */
.hero{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.hero .h1{font-size:clamp(44px,5.4vw,78px)}
.proj-wide .proj-copy{justify-content:center}
.proj-wide .proj-copy .btn{margin-top:8px}
@media (max-width:860px){.hero{grid-template-columns:minmax(0,1fr)}}
.proj:not(.proj-wide) .proj-visual{height:420px}
@media (max-width:720px){.proj:not(.proj-wide) .proj-visual{height:auto;min-height:260px}}
@media (max-width:820px){[data-svc]{grid-template-columns:minmax(0,1fr) !important}}
/* demo: waiting hint before results appear */
.demo-col{position:relative}
.wait{position:absolute;left:18px;right:18px;top:50%;text-align:center;font-size:14px;font-weight:600;color:#8E7FA3;animation:sw 10s ease infinite}
.wait i{font-style:normal;animation:blink 1.2s infinite}
.wait i:nth-child(2){animation-delay:.2s}.wait i:nth-child(3){animation-delay:.4s}
@keyframes sw{0%,45%{opacity:1}50%,100%{opacity:0}}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}
@media (max-width:720px){.wait{display:none}}
@media (prefers-reduced-motion: reduce){.wait{display:none}}
@media (max-width:720px){.hero .ghost{display:none}}
@media (max-width:900px){.proj-wide .proj-visual{order:-1}}

/* Screen-reader-only text */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Moving skills strip (home) */
.skills-strip{margin-top:20px;border-radius:28px;padding:18px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.skills-track{display:flex;width:max-content;gap:14px;margin:0;padding:0 7px;list-style:none;animation:skills-scroll 48s linear infinite}
.skills-strip:hover .skills-track{animation-play-state:paused}
.skill{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 6px 16px rgba(40,24,100,.08);font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:17px;color:#2A1B3D;white-space:nowrap}
.skill svg{flex:none}
@keyframes skills-scroll{to{transform:translateX(-50%)}}
.tag-ic{display:inline-flex;align-items:center;gap:7px}
.tag-ic svg{flex:none}
@media (max-width:600px){.skill{font-size:15px;padding:8px 14px 8px 10px}.skill svg{width:22px;height:22px}}
@media (prefers-reduced-motion: reduce){.skills-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;padding:0 16px}.skills-track [aria-hidden="true"]{display:none}}

/* Softer bubbles: keep them in the background, not the main view */
.orb{opacity:.22}

/* ================= Polish layer ================= */
html{-webkit-text-size-adjust:100%;color-scheme:light;scrollbar-color:#B9A9E6 transparent}
html[data-theme="dark"]{color-scheme:dark}
body{-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
h1,h2,h3,.lead{text-wrap:balance}.body,.small,.result{text-wrap:pretty}
.stat b,.kpi b,.step-n b{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:16px;top:-70px;z-index:100;padding:12px 20px;border-radius:999px;background:#2A1B3D;color:#fff;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:12px;color:#fff}
.progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#3350DC,#7A5CE6,#E8697A,#FF9A52);pointer-events:none}
.nav{transition:box-shadow .3s ease,background .3s ease}
.nav.stuck{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 14px 44px rgba(74,48,120,.22)}
.nav-right{margin-left:auto}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;margin-left:6px;padding:0;border:1px solid rgba(255,255,255,.95);border-radius:999px;background:rgba(255,255,255,.72);color:#2A1B3D;cursor:pointer;transition:rotate .4s cubic-bezier(.2,.7,.2,1)}
.theme-toggle:hover{rotate:18deg}
.theme-toggle .i-moon{display:none}
html[data-theme="dark"] .theme-toggle .i-sun{display:none}
html[data-theme="dark"] .theme-toggle .i-moon{display:block}
@media (max-width:759px){.theme-toggle{order:2;margin-left:0}.nav-cta{order:2}}
/* spotlight that follows the pointer on cards */
.tile{position:relative}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.55),transparent 62%)}
@media (hover:hover){.tile:hover::after{opacity:1}}
@media (hover:none){.tile:hover{translate:none}.btn:hover{translate:none}}
/* scroll-reveal fallback for browsers without scroll-driven animation */
.js-rv .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js-rv .rv.in{opacity:1;transform:none}
/* forms */
.field input:user-invalid,.field textarea:user-invalid{border-color:#D6455D;box-shadow:0 0 0 3px rgba(214,69,93,.16)}
.btn[disabled]{opacity:.6;cursor:progress}
details.glass summary{list-style:none;display:flex;justify-content:space-between;gap:16px}
details.glass summary::-webkit-details-marker{display:none}
details.glass summary::after{content:"+";font-weight:500;font-size:22px;line-height:1;transition:rotate .25s ease}
details.glass[open] summary::after{rotate:45deg}
.to-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:40;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#2A1B3D;font-size:18px;cursor:pointer;box-shadow:0 12px 30px rgba(40,24,100,.2);opacity:0;visibility:hidden;translate:0 10px;transition:opacity .25s,translate .25s,visibility .25s}
.to-top.show{opacity:1;visibility:visible;translate:0 0}
.page{padding-bottom:env(safe-area-inset-bottom)}
@media print{.nav,.blobs,.progress,.to-top,.skills-strip,.theme-toggle{display:none!important}body,.page{background:#fff!important}.glass,.frost{box-shadow:none!important;backdrop-filter:none!important}}
@media (prefers-reduced-motion:reduce){.progress{transition:none}.theme-toggle,.theme-toggle:hover,.to-top,details.glass summary::after{transition:none;rotate:none}.js-rv .rv{opacity:1;transform:none;transition:none}.tile::after{display:none}}

/* ================= Dark theme ================= */
html[data-theme="dark"] body{background:#120C24;color:#EFE8FA}
html[data-theme="dark"] .page{background:linear-gradient(180deg,#120C24 0%,#190F30 30%,#1D1030 58%,#150D28 100%)}
html[data-theme="dark"] .blob{opacity:.26!important}
html[data-theme="dark"] .glass{background:rgba(44,30,78,.52);border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 22px 54px rgba(0,0,0,.42)}
html[data-theme="dark"] .frost{background:rgba(34,24,60,.88);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 44px rgba(0,0,0,.5)}
html[data-theme="dark"] .nav.stuck{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 44px rgba(0,0,0,.5)}
html[data-theme="dark"] .tile::after{background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(160,140,255,.2),transparent 62%)}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] a,html[data-theme="dark"] a:hover,html[data-theme="dark"] .brand,html[data-theme="dark"] .link,html[data-theme="dark"] .back,html[data-theme="dark"] .tag,html[data-theme="dark"] .skill,html[data-theme="dark"] .result,html[data-theme="dark"] .socials a,html[data-theme="dark"] .field label,html[data-theme="dark"] .meta b{color:#F4EEFF}
html[data-theme="dark"] .lead,html[data-theme="dark"] .body,html[data-theme="dark"] .small,html[data-theme="dark"] .nav-links a,html[data-theme="dark"] .svc li,html[data-theme="dark"] .shot figcaption,html[data-theme="dark"] .foot-col a,html[data-theme="dark"] .foot-bar{color:#CDBFE6}
html[data-theme="dark"] .hero .lead,html[data-theme="dark"] .cta p{color:#F1EEFF}
html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .t-org{color:#A9B8FF}
html[data-theme="dark"] .t-when,html[data-theme="dark"] .meta>div>span,html[data-theme="dark"] .foot-col>span{color:#B8A9D4}
html[data-theme="dark"] .btn-dark{background:#F4EEFF;color:#2A1B3D}
html[data-theme="dark"] .btn-dark:hover{color:#2A1B3D}
html[data-theme="dark"] .btn-light,html[data-theme="dark"] .btn-light:hover{color:#2A1B3D}
html[data-theme="dark"] .btn-glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#F4EEFF}
html[data-theme="dark"] .nav-links a[aria-current="page"],html[data-theme="dark"] .tag,html[data-theme="dark"] .skill,html[data-theme="dark"] .socials a,html[data-theme="dark"] .nav-toggle,html[data-theme="dark"] .theme-toggle,html[data-theme="dark"] .copy-btn{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);color:#F4EEFF}
html[data-theme="dark"] .photo-cap{color:#fff}html[data-theme="dark"] .photo-cap span{color:#CDBFE6}
html[data-theme="dark"] .pill-blue{background:rgba(140,160,255,.2);color:#C9D3FF}
html[data-theme="dark"] .pill-yellow{color:#FFE27A}html[data-theme="dark"] .pill-orange{color:#FFB98A}
html[data-theme="dark"] .pill-green{background:rgba(31,157,99,.22);color:#7BE0AE}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field textarea{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.2)}
html[data-theme="dark"] .t-item,html[data-theme="dark"] .foot-bar,html[data-theme="dark"] .meta>div,html[data-theme="dark"] .nav-links{border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .to-top{background:rgba(44,30,78,.8);border-color:rgba(255,255,255,.18);color:#fff}
html[data-theme="dark"] ::selection{background:#7A5CE6;color:#fff}
html[data-theme="dark"] a:focus-visible,html[data-theme="dark"] button:focus-visible,html[data-theme="dark"] input:focus-visible,html[data-theme="dark"] textarea:focus-visible,html[data-theme="dark"] summary:focus-visible{outline-color:#A9B8FF}