:root{
  --bg:#05070b; --panel:#0a0f16; --panel2:#081019; --line:#203949;
  --text:#f2f7fa; --muted:#9eafb8; --blue:#0b73ff; --cyan:#17d7e8; --green:#22f05b;
  --shadow:0 28px 80px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
  radial-gradient(circle at 83% 4%,rgba(0,105,255,.13),transparent 25%),
  radial-gradient(circle at 10% 64%,rgba(0,240,100,.06),transparent 26%),
  linear-gradient(#04060a,#05070b 35%,#030509);
  color:var(--text);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}
body.modal-open{overflow:hidden}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.noise{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.container{width:min(1220px,92vw);margin:auto}
.site-header{position:sticky;top:0;z-index:30;background:linear-gradient(rgba(4,6,10,.93),rgba(4,6,10,.70),transparent);backdrop-filter:blur(10px)}
.nav{height:82px;display:flex;align-items:center;gap:35px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:white;margin-right:auto}
.brand img{width:62px;height:57px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(12,124,255,.28))}
.brand strong{display:block;font:700 25px/1 Space Grotesk,sans-serif;letter-spacing:.05em}
.brand span{display:block;margin-top:6px;font-size:8px;letter-spacing:.24em;color:#1ebdf1}
.nav-links{display:flex;gap:30px}
.nav-links a{font-size:12px;color:#dce7ec;text-decoration:none;letter-spacing:.06em;position:relative}
.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-10px;height:2px;background:var(--blue);box-shadow:0 0 12px var(--blue);transition:.25s}
.nav-links a:hover:after{right:0}
.language{display:flex;border:1px solid #345061;border-radius:24px;padding:3px}
.lang-btn{border:0;background:transparent;color:#a9bcc5;padding:7px 12px;border-radius:18px;font-size:12px}
.lang-btn.active{background:#0c3465;color:white;box-shadow:0 0 18px rgba(0,112,255,.55)}
.hero{min-height:650px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:40px;padding-top:30px}
.eyebrow{font-size:12px;letter-spacing:.34em;color:#b7c5cb;margin:0 0 18px}
.hero h1{font:800 clamp(45px,5.25vw,73px)/.98 Space Grotesk,sans-serif;letter-spacing:-.045em;font-style:italic;margin:0;text-transform:uppercase}
.gradient-text{background:linear-gradient(90deg,#0c64ff 10%,#00b8f5 48%,#23ee58 88%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{max-width:630px;color:#c7d1d6;line-height:1.6;font-size:17px;margin:24px 0 0}
.actions{display:flex;gap:16px;margin-top:30px}
.btn{border:1px solid #465863;background:transparent;color:white;min-height:49px;padding:0 22px;border-radius:7px;font-weight:700;font-size:12px;letter-spacing:.03em;display:inline-flex;align-items:center;justify-content:center;gap:20px;text-decoration:none;transition:.2s}
.btn:hover{transform:translateY(-2px);border-color:#1d8bff;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.btn-primary{color:#061016;border:0;background:linear-gradient(90deg,#0b69ff,#20e867);box-shadow:0 0 30px rgba(0,117,255,.22)}
.trust-row{display:flex;flex-wrap:wrap;gap:28px;margin-top:34px;color:#91a3aa}
.trust-row span{display:flex;align-items:center;gap:8px;font-size:19px;color:#87ac70}
.trust-row b{font-size:9px;line-height:1.25;color:#bac7cc;font-weight:500}
.hero-stage{height:500px;position:relative}
.status-card{position:absolute;right:30px;top:20px;width:180px;height:65px;border:1px solid #29475b;background:rgba(7,14,21,.82);backdrop-filter:blur(12px);border-radius:9px;padding:12px;display:flex;gap:10px;z-index:5;box-shadow:var(--shadow)}
.status-card b{font-size:10px;display:block}.status-card small{font-size:9px;color:#83979f}.status-card svg{position:absolute;width:90px;right:8px;bottom:7px}.status-card path{stroke:#06a9ef;stroke-width:1.2;fill:none}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);display:inline-block;flex:0 0 auto;margin-top:3px}
.monitor{position:absolute;left:10px;right:60px;top:92px;height:325px;border:1px solid #92764b;background:#07111b;border-radius:16px;transform:perspective(1100px) rotateY(-5deg) rotateX(1deg);box-shadow:0 40px 70px #000c,0 0 32px rgba(0,111,255,.16);overflow:hidden;display:grid;place-items:center}
.monitor:before{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse at 22% 75%,rgba(0,72,255,.48),transparent 34%),
  radial-gradient(ellipse at 83% 77%,rgba(0,255,97,.27),transparent 38%),
  linear-gradient(150deg,transparent 30%,rgba(0,146,255,.12),transparent 67%)}
.monitor img{width:155px;position:relative;z-index:2;filter:drop-shadow(0 0 22px rgba(0,152,255,.52))}
.flow-lines{position:absolute;left:-20%;right:-20%;bottom:30px;height:80px;background:
  repeating-radial-gradient(ellipse at 50% 100%,transparent 0 12px,rgba(0,166,255,.13) 13px 14px,transparent 15px 25px);
  transform:rotate(-8deg)}
.phone{position:absolute;right:2px;top:170px;width:82px;height:185px;border:1px solid #926f3f;border-radius:20px;background:#06101a;display:grid;place-items:center;transform:rotate(4deg);box-shadow:0 25px 50px #000a}
.phone img{width:52px}
.mug{position:absolute;right:84px;bottom:25px;width:94px;height:110px;background:linear-gradient(90deg,#0a0b0d,#16191b);border-radius:6px 6px 18px 18px;display:grid;place-items:center;box-shadow:0 25px 40px #0008}
.mug:after{content:"";position:absolute;right:-36px;top:22px;width:45px;height:50px;border:8px solid #11181c;border-left:0;border-radius:0 30px 30px 0}
.mug img{width:55px}
.section{padding:45px 0}
.section-heading{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:25px}
.section-heading h2{font-size:17px;letter-spacing:.32em;font-weight:500;white-space:nowrap;margin:0}
.section-heading span{height:1px;width:60px;background:linear-gradient(90deg,transparent,#0b7ff5)}
.section-heading span:last-child{transform:scaleX(-1)}
.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.service-card{background:linear-gradient(180deg,#091019,#060a0f);border:1px solid #2a4050;border-radius:9px;padding:24px 20px;min-height:210px;color:white;text-align:center;position:relative;transition:.25s}
.service-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(0,123,255,.06),transparent 45%,rgba(0,240,92,.03));opacity:0;transition:.25s}
.service-card:hover{transform:translateY(-6px);border-color:#10aaf8;box-shadow:0 20px 55px #0008,0 0 26px rgba(0,130,255,.12)}
.service-card:hover:before{opacity:1}
.service-icon{font-size:38px;color:#00b9ff;margin-bottom:15px}
.service-card:nth-child(n+4) .service-icon{color:#00ddc8}.service-card:last-child .service-icon{color:#20ed54}
.service-card h3{font-size:14px;margin:0 0 10px}.service-card p{font-size:11px;line-height:1.55;color:#aebdc4;margin:0}
.service-card i{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:24px;height:24px;border:1px solid #53646c;border-radius:50%;font-size:12px;display:grid;place-items:center;font-style:normal}
.ecosystem{display:grid;grid-template-columns:.72fr 1.28fr;gap:30px;align-items:center}
.ecosystem-copy h2{font:700 30px/1.08 Space Grotesk,sans-serif;font-style:italic;margin:0 0 14px}.ecosystem-copy em{color:#28ed64;font-style:normal}.ecosystem-copy p{font-size:11px;line-height:1.55;color:#a8b7be}.ecosystem-copy strong{font-size:9px;color:#0e9fff}
.ecosystem-flow{display:flex;align-items:flex-start;justify-content:space-between;gap:7px}
.ecosystem-flow>i{font-style:normal;color:#00d3e9;margin-top:24px}
.eco-node{width:90px;text-align:center}.eco-node span{display:grid;place-items:center;width:58px;height:58px;margin:auto;border:2px solid #008cff;border-radius:50%;color:#06bfff;font-size:23px;box-shadow:0 0 18px rgba(0,128,255,.13)}.eco-node.green span{border-color:#3dc820;color:#82dc20;box-shadow:0 0 18px rgba(81,255,0,.1)}
.eco-node b{display:block;font-size:9px;margin-top:8px;font-weight:500}.eco-node small{display:block;font-size:8px;line-height:1.35;color:#9daeb6;margin-top:7px}
.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.project-card{background:#080e15;border:1px solid #29404f;border-radius:8px;color:white;text-align:left;padding:0 0 14px;overflow:hidden;position:relative;transition:.25s}
.project-card:hover{transform:translateY(-6px);border-color:#12cced;box-shadow:0 18px 55px #0008,0 0 24px rgba(0,167,255,.1)}
.project-card b,.project-card span{display:block;padding:0 13px}.project-card b{font-size:11px;margin-top:12px}.project-card>span{font-size:9px;line-height:1.4;color:#a8bac2;margin-top:5px}.project-card>i{position:absolute;right:9px;top:9px;width:21px;height:21px;border:1px solid #536a76;border-radius:5px;display:grid;place-items:center;font-size:10px;font-style:normal}
.project-visual{height:125px;border-bottom:1px solid #223747;position:relative;overflow:hidden;background:linear-gradient(150deg,#0b1722,#0a0f15)}
.dashboard-viz{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:12px}.dashboard-viz div{border:1px solid #12435f;border-radius:4px;background:linear-gradient(180deg,#0c1d2c,#08121a)}.dashboard-viz div:nth-child(3){grid-column:span 2}
.portal-viz{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:14px}.portal-viz div{border:1px solid #175375;border-radius:5px;background:linear-gradient(180deg,#0a2130,#07131c)}.portal-viz div:after{content:"";display:block;height:3px;width:70%;margin:25px auto 0;background:linear-gradient(90deg,#0b80ff,#1beb61);box-shadow:0 0 9px #0b80ff}
.truck-viz{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 60%,#17334b,transparent 40%),linear-gradient(#101923,#071019)}.truck-viz:before{content:"";width:125px;height:45px;border-radius:4px 8px 6px 5px;background:#0c1721;border:1px solid #264d65;box-shadow:24px 13px 0 -6px #11191e}.truck-viz span{position:absolute;font-size:15px;letter-spacing:.2em;color:#1aa6db}
.analytics-viz{padding:14px}.analytics-viz div:first-child{height:58px;border-left:1px solid #164963;border-bottom:1px solid #164963;background:linear-gradient(170deg,transparent 47%,#00b8e8 48% 50%,transparent 51%)}.analytics-viz div:last-child{display:flex;gap:4px;margin-top:10px;height:25px;background:repeating-linear-gradient(90deg,#0b75a7 0 8px,transparent 8px 16px)}
.center{text-align:center;margin-top:22px}.microcopy{display:block;color:#1c9de9;font-size:9px;margin-top:8px}
.process-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;border-top:1px solid #193344;padding-top:22px}
.process-grid article{position:relative}.process-grid article:not(:last-child):after{content:"›";position:absolute;right:-10px;top:20px;color:#08cdb9;font-size:24px}
.process-grid span{color:#0f9aff;font-size:13px}.process-grid h3{font-size:11px;margin:4px 0}.process-grid p{font-size:8.5px;color:#9eafb7;line-height:1.45;margin:0}
.about-card{display:grid;grid-template-columns:.85fr 1.15fr .7fr;border:1px solid #213b4a;border-radius:11px;overflow:hidden;background:linear-gradient(90deg,#061019,#070b10);min-height:300px}
.founder-visual{position:relative;min-height:300px;overflow:hidden;background:radial-gradient(circle at 58% 54%,rgba(0,112,191,.18),transparent 39%)}.founder-visual img{position:absolute;bottom:-115px;right:-8px;width:360px;max-width:none;filter:drop-shadow(0 20px 35px #000)}
.founder-badge{position:absolute;left:20px;top:35px;width:125px;background:rgba(7,15,22,.78);border:1px solid #2d5269;border-radius:7px;padding:11px;backdrop-filter:blur(8px);z-index:2}.founder-badge small{font-size:8px;display:inline;margin-left:5px}.founder-badge b{display:block;font-size:11px;margin:6px 0}.founder-badge p{font-size:8px;line-height:1.4;color:#9fb1b9;margin:0}
.about-copy{padding:35px 26px}.about-copy .eyebrow{font-size:8px;margin-bottom:8px}.about-copy h2{font:500 22px Space Grotesk,sans-serif;margin:0 0 14px}.about-copy p{font-size:10px;color:#aebdc4;line-height:1.55}.signature{font-family:cursive;font-size:25px;font-style:italic;margin-top:13px}.founder-title{color:#2eed5b;font-size:8px;letter-spacing:.12em}
.capabilities{border-left:1px solid #173140;padding:42px 25px;display:flex;flex-direction:column;gap:18px}.capabilities span{font-size:16px;color:#0f8cff}.capabilities b{font-size:9px;color:#c2cdd2;margin-left:9px;font-weight:500}
.closing{padding:18px 0 55px;display:flex;align-items:center;justify-content:space-between;gap:30px}.closing h2{font:italic 700 26px Space Grotesk,sans-serif;margin:0;color:#c7cbcd}.closing h2 span{background:linear-gradient(90deg,#0788ff,#26ed58);-webkit-background-clip:text;background-clip:text;color:transparent}.closing-actions{display:flex;gap:12px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:80;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(14px)}.overlay.show{display:flex;animation:fade .18s ease}.modal{width:min(620px,96vw);max-height:88vh;overflow:auto;background:linear-gradient(180deg,#0b121b,#060a10);border:1px solid #2f5d78;border-radius:16px;padding:28px;position:relative;box-shadow:0 30px 120px #000,0 0 34px rgba(0,166,255,.09);animation:pop .22s cubic-bezier(.2,.7,.1,1.1)}.modal-close{position:absolute;right:14px;top:10px;background:transparent;border:0;color:#dce6eb;font-size:27px}.modal h2{font:600 31px Space Grotesk;margin:5px 0 14px}.modal p{color:#adbec6;line-height:1.65}.modal-icon{font-size:45px;color:#06bfff}.modal ul{padding-left:20px;color:#b4c5cc;line-height:1.8}.project-modal-viz{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;margin:20px 0}.panel{height:78px;border:1px solid #174862;border-radius:8px;background:linear-gradient(180deg,#0b1b28,#071019)}.panel.tall{grid-row:span 2;height:auto}.panel.wide{grid-column:span 2}
.gallery-modal{width:min(850px,96vw)}.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.gallery-grid button{background:#081019;border:1px solid #29485a;border-radius:10px;color:white;padding:20px;text-align:left}.gallery-grid button:hover{border-color:#10c6e7}.gallery-grid span{font-size:28px}.gallery-grid b,.gallery-grid small{display:block}.gallery-grid b{margin-top:15px}.gallery-grid small{color:#98abb4;margin-top:4px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid label{display:grid;gap:7px;color:#b8c8cf;font-size:11px}.form-grid .full{grid-column:1/-1}.form-grid input,.form-grid textarea,.form-grid select{width:100%;background:#050b11;border:1px solid #294657;color:white;border-radius:8px;padding:12px;outline:none}.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{border-color:#0a9cff;box-shadow:0 0 0 3px rgba(0,137,255,.1)}.contact-modal .btn{margin-top:18px}.form-note{font-size:9px!important}
.reveal{opacity:0;transform:translateY(18px);transition:.7s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.07s}.delay-2{transition-delay:.14s}.delay-3{transition-delay:.21s}.delay-4{transition-delay:.28s}
@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes pop{from{opacity:0;transform:scale(.94) translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.nav-links{display:none}.hero{grid-template-columns:1fr;min-height:auto;padding-top:45px}.hero-stage{height:430px}.service-grid{grid-template-columns:repeat(2,1fr)}.service-card:last-child{grid-column:span 2}.ecosystem{grid-template-columns:1fr}.ecosystem-flow{overflow-x:auto;padding-bottom:15px}.project-grid{grid-template-columns:repeat(2,1fr)}.process-grid{grid-template-columns:repeat(3,1fr)}.process-grid article:nth-child(3):after{display:none}.about-card{grid-template-columns:1fr 1.2fr}.capabilities{grid-column:1/-1;border-left:0;border-top:1px solid #173140;display:grid;grid-template-columns:repeat(3,1fr);padding:25px}.closing{flex-direction:column;text-align:center}}
@media(max-width:620px){.brand div{display:none}.hero h1{font-size:43px}.hero-sub{font-size:15px}.actions,.closing-actions{flex-direction:column;align-items:stretch}.btn{width:100%}.hero-stage{height:350px}.monitor{left:0;right:26px;height:250px;top:70px}.phone{height:145px;width:63px;top:140px}.mug{display:none}.service-grid,.project-grid,.gallery-grid,.form-grid{grid-template-columns:1fr}.service-card:last-child{grid-column:auto}.ecosystem-flow{justify-content:flex-start}.process-grid{grid-template-columns:repeat(2,1fr)}.process-grid article:nth-child(3):after{display:block}.process-grid article:nth-child(even):after{display:none}.about-card{grid-template-columns:1fr}.founder-visual{min-height:370px}.founder-visual img{width:370px;right:-50px}.capabilities{grid-template-columns:1fr}.closing h2{font-size:23px}}


/* v2 production polish */
.scroll-progress{position:fixed;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--green));z-index:120;box-shadow:0 0 12px rgba(0,180,255,.7)}
.mobile-menu-btn{display:none;background:#071019;border:1px solid #294b60;color:white;border-radius:8px;width:42px;height:38px;font-size:18px}
.nav-links a.active{color:white}
.nav-links a.active:after{right:0}
.hero-stage{transition:transform .15s ease-out}
.monitor,.phone,.mug,.status-card{will-change:transform}
.service-card,.project-card{transform-style:preserve-3d}
.service-card.tilt,.project-card.tilt{transition:transform .08s linear,border-color .2s,box-shadow .2s}
.concept-badge{position:absolute!important;left:9px!important;top:9px!important;z-index:4!important;padding:5px 7px!important;margin:0!important;background:rgba(3,9,15,.78)!important;border:1px solid #28516a;border-radius:5px;color:#7fc9ef!important;font-size:7px!important;letter-spacing:.12em;backdrop-filter:blur(8px)}
.decision-section{padding-top:20px;padding-bottom:20px}
.decision-card{display:grid;grid-template-columns:1.2fr 1fr auto;align-items:center;gap:30px;border:1px solid #23495d;border-radius:14px;padding:28px 30px;background:
 radial-gradient(circle at 80% 30%,rgba(0,238,91,.08),transparent 26%),
 radial-gradient(circle at 10% 50%,rgba(0,105,255,.1),transparent 30%),
 linear-gradient(110deg,#081019,#060a0f);box-shadow:0 25px 70px #0006}
.decision-card .eyebrow{font-size:8px;margin-bottom:8px;color:#19b6e8}
.decision-card h2{font:600 23px/1.15 Space Grotesk,sans-serif;margin:0}
.decision-card>p{font-size:10.5px;line-height:1.6;color:#aebec5;margin:0}
.founder-visual img{filter:drop-shadow(0 20px 35px #000) drop-shadow(0 0 18px rgba(0,137,255,.12))}
@media(max-width:1000px){
  .mobile-menu-btn{display:block}
  .nav-links{position:absolute;left:4vw;right:4vw;top:76px;display:none;flex-direction:column;gap:0;padding:10px;background:rgba(5,9,14,.97);border:1px solid #29485a;border-radius:12px;box-shadow:0 25px 70px #000;backdrop-filter:blur(16px)}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 12px;border-bottom:1px solid #142a36}
  .nav-links a:last-child{border-bottom:0}
  .nav-links a:after{display:none}
  .decision-card{grid-template-columns:1fr}
}


/* v3 realism pass: hero devices */
.hero-stage{height:540px;overflow:visible}
.device-scene{position:absolute;inset:72px 0 0 0}
.desk-glow{
  position:absolute;left:6%;right:2%;bottom:10px;height:120px;border-radius:50%;
  background:
    radial-gradient(ellipse at 25% 50%, rgba(0,128,255,.20), transparent 40%),
    radial-gradient(ellipse at 75% 60%, rgba(34,240,91,.14), transparent 36%),
    radial-gradient(ellipse at 50% 70%, rgba(255,255,255,.04), transparent 58%);
  filter:blur(18px)
}
.realistic-device{position:absolute;box-shadow:0 30px 80px rgba(0,0,0,.50)}
.device-screen{
  position:relative;overflow:hidden;border-radius:inherit;height:100%;
  background:
    radial-gradient(circle at 22% 70%, rgba(0,94,255,.55), transparent 26%),
    radial-gradient(circle at 78% 72%, rgba(34,240,91,.28), transparent 32%),
    linear-gradient(140deg,#07111a 10%,#0a1622 60%,#08131e 100%);
}
.screen-reflection{
  position:absolute;inset:-10% auto -10% -22%;width:56%;
  background:linear-gradient(110deg,rgba(255,255,255,.18),rgba(255,255,255,.04) 32%,transparent 58%);
  transform:skewX(-18deg);
  opacity:.42;pointer-events:none;filter:blur(.3px)
}
.laptop{
  left:6%;top:64px;width:530px;height:290px;transform:perspective(1200px) rotateY(-7deg) rotateX(2deg);
}
.laptop .device-screen{
  height:246px;border:1px solid #7a6544;border-bottom:0;border-radius:18px 18px 6px 6px;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 28px rgba(0,129,255,.10)
}
.laptop .device-screen:before{
  content:"";position:absolute;left:0;right:0;top:0;height:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent)
}
.laptop .device-screen img{width:165px;position:absolute;inset:0;margin:auto;z-index:2;filter:drop-shadow(0 0 26px rgba(0,138,255,.48))}
.laptop-base{
  position:absolute;left:-10px;right:-10px;bottom:0;height:56px;border-radius:0 0 24px 24px/0 0 22px 22px;
  background:linear-gradient(180deg,#3b4047,#272d34 25%,#181d23 70%,#0f1217);
  border:1px solid #4a535d;border-top-color:#6c747b;
  box-shadow:0 12px 32px rgba(0,0,0,.55)
}
.laptop-base:before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);top:4px;width:90px;height:5px;border-radius:0 0 20px 20px;
  background:rgba(255,255,255,.16)
}
.keyboard{
  position:absolute;left:78px;right:78px;top:10px;height:22px;border-radius:4px;
  background:
   repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 12px),
   repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px),
   linear-gradient(180deg,#181b20,#0d1014)
}
.trackpad{
  position:absolute;left:50%;transform:translateX(-50%);bottom:8px;width:88px;height:14px;border-radius:3px;
  background:linear-gradient(180deg,#3d454e,#2b3139)
}
.speaker{
  position:absolute;top:11px;width:44px;height:20px;border-radius:4px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,transparent 1px 4px), linear-gradient(180deg,#20262c,#0f1317)
}
.speaker.left{left:22px}.speaker.right{right:22px}

.tablet{
  right:122px;top:84px;width:148px;height:216px;border-radius:18px;
  background:linear-gradient(155deg,#434d57,#181d23 40%,#0c1116);padding:9px;
  transform:rotate(8deg)
}
.tablet .device-screen{border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.tablet .device-screen img{width:78px;position:absolute;inset:0;margin:auto;filter:drop-shadow(0 0 18px rgba(0,138,255,.38))}

.phone{
  right:22px;top:112px;width:96px;height:196px;border-radius:24px;
  background:linear-gradient(155deg,#5a6570,#2c333c 32%,#0f1317 66%,#0a0d11);padding:8px;
  transform:rotate(6deg)
}
.phone .device-screen{border-radius:18px}
.phone .device-screen img{width:52px;position:absolute;inset:0;margin:auto;filter:drop-shadow(0 0 14px rgba(0,138,255,.36))}
.phone-notch{
  position:absolute;left:50%;transform:translateX(-50%);top:11px;width:34px;height:7px;border-radius:0 0 9px 9px;background:#0b0f12;z-index:3
}
.phone:after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:-6px;height:16px;border-radius:0 0 22px 22px;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.10),transparent 70%);
  filter:blur(3px)
}

.realistic-mug{
  position:absolute;right:118px;bottom:18px;width:108px;height:118px;
  background:linear-gradient(180deg,#151a1e,#0e1216 68%,#080c10);
  border-radius:10px 10px 22px 22px;display:grid;place-items:center;
  box-shadow:0 20px 36px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05)
}
.realistic-mug:before{
  content:"";position:absolute;left:9px;right:9px;top:-8px;height:18px;border-radius:50%;
  background:linear-gradient(180deg,#444d56,#171b20 35%,#0f1419 100%);
  box-shadow:0 5px 10px rgba(0,0,0,.35)
}
.realistic-mug:after{
  content:"";position:absolute;right:-28px;top:28px;width:40px;height:52px;border-radius:0 28px 28px 0;border:7px solid #171c21;border-left:0
}
.realistic-mug img{width:58px;z-index:2;filter:drop-shadow(0 0 12px rgba(0,138,255,.20))}
.coffee-surface{
  position:absolute;left:15px;right:15px;top:-1px;height:14px;border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 25%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.07), transparent 34%),
    linear-gradient(180deg,#3a2016,#28140e 35%,#130b09 100%);
  z-index:1;box-shadow:inset 0 2px 4px rgba(0,0,0,.30)
}
.steam{
  position:absolute;bottom:98px;width:20px;height:74px;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.20),rgba(255,255,255,0));
  filter:blur(10px);opacity:0;animation:steamRise 6.8s linear infinite
}
.steam:before{
  content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);border-radius:50%
}
.steam-1{left:20px;animation-delay:0s}
.steam-2{left:44px;animation-delay:2.1s}
.steam-3{left:66px;animation-delay:4.1s}
@keyframes steamRise{
  0%{opacity:0;transform:translateY(14px) translateX(0) scale(.6)}
  8%{opacity:.34}
  50%{opacity:.26;transform:translateY(-24px) translateX(6px) scale(1)}
  100%{opacity:0;transform:translateY(-56px) translateX(-6px) scale(1.3)}
}
.status-card{background:rgba(7,14,21,.90)}
.monitor,.phone,.mug{display:none} /* legacy scene hidden */
@media(max-width:1000px){
  .hero-stage{height:420px}
  .device-scene{top:48px}
  .laptop{left:0;top:90px;width:380px;height:210px}
  .laptop .device-screen{height:178px}
  .laptop .device-screen img{width:122px}
  .tablet{right:104px;top:96px;width:110px;height:162px}
  .phone{right:22px;top:118px;width:76px;height:154px}
  .realistic-mug{right:92px;bottom:8px;width:92px;height:102px}
}
@media(max-width:620px){
  .hero-stage{height:360px}
  .status-card{right:0;top:8px;transform:scale(.92);transform-origin:top right}
  .device-scene{top:48px}
  .laptop{left:-2px;top:104px;width:280px;height:162px;transform:none}
  .laptop .device-screen{height:138px}
  .laptop .device-screen img{width:92px}
  .laptop-base{height:36px}
  .keyboard{left:44px;right:44px;top:6px;height:14px}
  .speaker{top:7px;width:26px;height:12px}
  .trackpad{width:52px;height:8px;bottom:5px}
  .tablet{right:78px;top:98px;width:84px;height:124px}
  .tablet .device-screen img{width:50px}
  .phone{right:10px;top:112px;width:62px;height:128px}
  .phone .device-screen img{width:38px}
  .realistic-mug{right:46px;bottom:4px;width:72px;height:82px}
  .realistic-mug img{width:40px}
  .realistic-mug:after{right:-20px;top:19px;width:29px;height:38px;border-width:6px}
  .coffee-surface{left:11px;right:11px}
  .steam{bottom:70px;height:48px;width:16px}
}


/* v4 impact pass */
.hero{
  position:relative;
}
.hero-copy{
  position:relative;
  z-index:4;
}
.hero-stage{
  height:580px;
  position:relative;
  z-index:2;
}
.device-scene{
  position:absolute;
  inset:56px 0 0 0;
  overflow:visible;
}

/* Stronger background without losing existing design */
.impact-bg{
  position:absolute;
  inset:-20px -20px 0 -40px;
  pointer-events:none;
}
.impact-orb,
.impact-ring,
.impact-streak,
.impact-grid{
  position:absolute;
}
.impact-orb{
  border-radius:50%;
  filter:blur(18px);
  opacity:.95;
}
.orb-1{
  width:340px;height:340px;
  right:120px;top:46px;
  background:radial-gradient(circle, rgba(0,128,255,.38) 0%, rgba(0,128,255,.16) 30%, rgba(0,128,255,0) 70%);
  animation:bgFloat1 9s ease-in-out infinite;
}
.orb-2{
  width:280px;height:280px;
  right:8px;top:180px;
  background:radial-gradient(circle, rgba(34,240,91,.30) 0%, rgba(34,240,91,.14) 34%, rgba(34,240,91,0) 72%);
  animation:bgFloat2 11s ease-in-out infinite;
}
.impact-ring{
  border-radius:50%;
  border:1px solid rgba(20,169,255,.12);
  box-shadow:0 0 40px rgba(0,136,255,.08), inset 0 0 40px rgba(0,136,255,.03);
}
.ring-1{
  width:470px;height:470px;
  right:20px;top:18px;
}
.ring-2{
  width:580px;height:580px;
  right:-68px;top:-30px;
  border-color:rgba(34,240,91,.10);
}
.impact-streak{
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(0,154,255,.32), rgba(34,240,91,.22), rgba(255,255,255,0));
  filter:blur(2px);
  opacity:.9;
}
.streak-1{
  width:420px;height:2px;
  right:112px;top:210px;
  transform:rotate(-22deg);
  box-shadow:0 0 24px rgba(0,145,255,.45);
}
.streak-2{
  width:360px;height:2px;
  right:22px;top:275px;
  transform:rotate(12deg);
  box-shadow:0 0 24px rgba(34,240,91,.34);
}
.impact-grid{
  right:84px;bottom:62px;width:260px;height:120px;opacity:.16;
  background:
    linear-gradient(rgba(0,140,255,.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,140,255,.25) 1px, transparent 1px);
  background-size:18px 18px,18px 18px;
  mask-image:linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
  transform:perspective(700px) rotateX(72deg) rotateZ(-8deg);
}

/* More modern laptop */
.laptop{
  left:0;
  top:78px;
  width:560px;
  height:315px;
  transform:perspective(1200px) rotateY(-8deg) rotateX(2deg);
}
.laptop .device-screen{
  height:256px;
  border:1px solid #5e6770;
  border-bottom:0;
  border-radius:20px 20px 8px 8px;
  background:
    radial-gradient(circle at 18% 72%, rgba(0,104,255,.68), transparent 26%),
    radial-gradient(circle at 78% 74%, rgba(34,240,91,.34), transparent 30%),
    linear-gradient(140deg,#07111a 10%,#0d1b28 58%,#08131d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 24px 50px rgba(255,255,255,.03),
    0 0 34px rgba(0,129,255,.09);
}
.laptop .device-screen:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:38px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.18));
}
.laptop .device-screen img{
  width:175px;
}
.screen-reflection{
  inset:-12% auto -12% -18%;
  width:60%;
  background:linear-gradient(112deg, rgba(255,255,255,.24), rgba(255,255,255,.08) 28%, transparent 58%);
}
.laptop-base{
  left:-14px;right:-14px;
  height:60px;
  border-radius:0 0 26px 26px/0 0 20px 20px;
  background:linear-gradient(180deg,#6a7279 0%, #454d55 8%, #20262c 34%, #12161b 75%, #0c1014 100%);
  border:1px solid #5e6870;
  border-top-color:#7f8890;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 16px 32px rgba(0,0,0,.55);
}
.laptop-base:before{
  width:110px;
  height:6px;
  top:4px;
  background:rgba(255,255,255,.18);
}
.keyboard{
  left:86px;right:86px;top:10px;height:26px;border-radius:5px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 2px, transparent 2px 8px),
    linear-gradient(180deg,#1a1f24,#0f1317);
}
.trackpad{
  width:108px;height:16px;
  background:linear-gradient(180deg,#484f58,#2f353d);
}
.speaker{top:12px;width:46px;height:22px}
.speaker.left{left:24px}
.speaker.right{right:24px}

/* Make tablet and phone read as intentional secondary props */
.tablet{
  right:138px;
  top:96px;
  width:154px;height:224px;
  border-radius:20px;
  background:linear-gradient(155deg,#69717a,#252b33 34%,#0f1318);
  padding:10px;
  transform:rotate(10deg);
  box-shadow:0 26px 54px rgba(0,0,0,.48);
}
.tablet .device-screen{
  border-radius:14px;
}
.phone{
  right:20px;
  top:134px;
  width:102px;height:204px;
  transform:rotate(8deg);
  box-shadow:0 24px 50px rgba(0,0,0,.5);
}

/* Bring the mug forward and make it obvious */
.realistic-mug{
  right:142px;
  bottom:-8px;
  width:128px;
  height:138px;
  z-index:5;
  background:linear-gradient(180deg,#1b2024,#10151a 70%,#090d11);
  border-radius:12px 12px 28px 28px;
  box-shadow:
    0 28px 44px rgba(0,0,0,.60),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(255,255,255,.04);
}
.realistic-mug:before{
  left:10px;right:10px;top:-10px;height:22px;
  background:linear-gradient(180deg,#5d646c,#252a30 32%,#101419 100%);
}
.realistic-mug:after{
  right:-34px;top:30px;width:44px;height:58px;border-radius:0 32px 32px 0;border:8px solid #1c2228;border-left:0;
}
.realistic-mug img{
  width:66px;
  opacity:.95;
}
.coffee-surface{
  left:16px;right:16px;top:0;height:16px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.14), transparent 24%),
    radial-gradient(circle at 70% 64%, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(180deg,#4a281a,#30170f 40%,#130a08 100%);
}
.steam{
  bottom:110px;
  width:24px;
  height:86px;
  filter:blur(12px);
}
.steam-1{left:22px}
.steam-2{left:52px}
.steam-3{left:82px}

/* Make desk lighting more dramatic */
.desk-glow{
  left:-4%;
  right:-2%;
  bottom:-8px;
  height:170px;
  background:
    radial-gradient(ellipse at 18% 58%, rgba(0,128,255,.28), transparent 34%),
    radial-gradient(ellipse at 50% 82%, rgba(255,255,255,.05), transparent 42%),
    radial-gradient(ellipse at 82% 60%, rgba(34,240,91,.18), transparent 30%);
  filter:blur(18px);
}

/* Subtle giant logo aura behind scene */
.hero-stage::before{
  content:"";
  position:absolute;
  right:34px;top:64px;
  width:360px;height:360px;
  background:
    linear-gradient(130deg, rgba(10,111,255,.18), transparent 38%),
    linear-gradient(35deg, transparent 52%, rgba(34,240,91,.16));
  clip-path:polygon(10% 90%, 28% 16%, 47% 58%, 70% 8%, 92% 82%, 64% 58%, 53% 82%, 29% 78%);
  filter:blur(8px);
  opacity:.9;
  pointer-events:none;
}

@keyframes bgFloat1{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(8px,-10px,0) scale(1.05)}
}
@keyframes bgFloat2{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-10px,10px,0) scale(1.04)}
}

@media(max-width:1000px){
  .hero-stage{height:450px}
  .device-scene{inset:42px 0 0 0}
  .orb-1{width:250px;height:250px;right:84px;top:40px}
  .orb-2{width:220px;height:220px;right:10px;top:170px}
  .ring-1{width:340px;height:340px;right:20px;top:34px}
  .ring-2{width:420px;height:420px;right:-30px;top:8px}
  .impact-grid{right:40px;bottom:56px;width:180px;height:90px}
  .laptop{left:-4px;top:96px;width:390px;height:222px}
  .laptop .device-screen{height:182px}
  .laptop .device-screen img{width:126px}
  .tablet{right:106px;top:110px;width:114px;height:168px}
  .phone{right:18px;top:130px;width:78px;height:160px}
  .realistic-mug{right:86px;bottom:-2px;width:96px;height:104px}
  .realistic-mug img{width:44px}
  .realistic-mug:after{right:-22px;top:24px;width:28px;height:38px;border-width:6px}
  .steam{bottom:78px;height:58px;width:18px}
}

@media(max-width:620px){
  .hero-stage{height:382px}
  .device-scene{inset:38px 0 0 0}
  .hero-stage::before{width:220px;height:220px;right:24px;top:66px}
  .orb-1{width:180px;height:180px;right:70px;top:56px}
  .orb-2{width:160px;height:160px;right:4px;top:150px}
  .ring-1{width:220px;height:220px;right:12px;top:76px}
  .ring-2{width:280px;height:280px;right:-18px;top:50px}
  .impact-streak{display:none}
  .impact-grid{display:none}
  .laptop{left:-2px;top:120px;width:290px;height:168px;transform:none}
  .laptop .device-screen{height:138px}
  .laptop .device-screen img{width:94px}
  .laptop-base{height:38px;left:-8px;right:-8px}
  .keyboard{left:44px;right:44px;top:6px;height:15px}
  .speaker{width:24px;height:11px;top:8px}
  .trackpad{width:54px;height:8px;bottom:5px}
  .tablet{right:76px;top:116px;width:86px;height:126px}
  .tablet .device-screen img{width:48px}
  .phone{right:10px;top:126px;width:62px;height:128px}
  .phone .device-screen img{width:36px}
  .realistic-mug{right:48px;bottom:-2px;width:74px;height:82px}
  .realistic-mug img{width:36px}
  .steam{bottom:58px;height:42px;width:14px;filter:blur(9px)}
}


/* v5: photoreal hero — obvious visual change */
.photoreal-scene{
  position:absolute;
  inset:58px -22px 6px -8px;
  overflow:visible;
  isolation:isolate;
}
.hero-photo{
  position:absolute;
  inset:22px 0 0 0;
  border-radius:30px;
  background:
    linear-gradient(90deg, rgba(5,7,11,.0), rgba(5,7,11,.0)),
    url("assets/hero-real-scene.jpg") center center / cover no-repeat;
  box-shadow:
    0 44px 120px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.045),
    0 0 70px rgba(0,117,255,.11);
  transform:perspective(1400px) rotateY(-2deg);
  overflow:hidden;
}
.hero-photo::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(4,6,10,.32), transparent 25%, transparent 80%, rgba(4,6,10,.16)),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 35%, rgba(0,0,0,.11));
  pointer-events:none;
}
.hero-photo::after{
  content:"";
  position:absolute;
  left:7%;right:8%;bottom:-18px;height:72px;
  background:radial-gradient(ellipse at center,rgba(0,150,255,.26),rgba(34,240,91,.08) 38%,transparent 70%);
  filter:blur(16px);
}
.photo-vignette{
  position:absolute;
  inset:22px 0 0 0;
  border-radius:30px;
  pointer-events:none;
  box-shadow:
    inset 60px 0 90px rgba(5,7,11,.22),
    inset -35px 0 60px rgba(5,7,11,.14),
    inset 0 -45px 70px rgba(5,7,11,.32);
  z-index:2;
}
.live-status{
  position:absolute;
  z-index:6;
  right:18px;
  top:0;
  width:190px;
  height:68px;
  border:1px solid rgba(62,108,135,.78);
  background:rgba(6,13,20,.80);
  backdrop-filter:blur(16px);
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  gap:10px;
  box-shadow:0 20px 44px rgba(0,0,0,.42),0 0 24px rgba(0,155,255,.08)
}
.live-status b{font-size:10px;display:block}
.live-status small{display:block;font-size:9px;color:#91a6af;margin-top:2px}
.live-status svg{position:absolute;width:92px;right:9px;bottom:8px}
.live-status path{stroke:#0ab8ef;stroke-width:1.2;fill:none}

/* Steam is intentionally over the real mug in the photograph */
.coffee-steam{
  position:absolute;
  z-index:8;
  right:144px;
  top:240px;
  width:34px;
  height:120px;
  border-radius:50%;
  opacity:0;
  background:
    radial-gradient(ellipse at center,rgba(255,255,255,.32),rgba(255,255,255,.08) 34%,transparent 70%);
  filter:blur(13px);
  mix-blend-mode:screen;
  animation:realSteam 6.3s ease-in-out infinite;
}
.steam-a{right:153px;animation-delay:0s}
.steam-b{right:126px;animation-delay:1.9s}
.steam-c{right:178px;animation-delay:3.8s}
@keyframes realSteam{
  0%{opacity:0;transform:translate3d(0,28px,0) scale(.62) rotate(0deg)}
  12%{opacity:.5}
  45%{opacity:.38;transform:translate3d(8px,-8px,0) scale(.95) rotate(4deg)}
  72%{opacity:.23;transform:translate3d(-5px,-45px,0) scale(1.16) rotate(-4deg)}
  100%{opacity:0;transform:translate3d(7px,-88px,0) scale(1.38) rotate(6deg)}
}

/* Hide all legacy CSS-built prop pieces from earlier versions */
.device-scene > .impact-bg,
.device-scene > .desk-glow,
.device-scene > .laptop,
.device-scene > .tablet,
.device-scene > .phone,
.device-scene > .realistic-mug,
.device-scene > .status-card{
  display:none!important;
}

/* Add a cinematic moving aurora behind the whole hero, not on top of it */
.hero::before{
  content:"";
  position:absolute;
  z-index:-2;
  width:900px;
  height:680px;
  right:-260px;
  top:-60px;
  background:
    radial-gradient(circle at 28% 40%,rgba(0,104,255,.28),transparent 28%),
    radial-gradient(circle at 70% 60%,rgba(34,240,91,.18),transparent 24%),
    conic-gradient(from 210deg at 55% 50%,transparent,rgba(0,160,255,.12),transparent 23%,rgba(31,239,91,.10),transparent 48%);
  filter:blur(28px);
  opacity:.85;
  animation:auroraMove 12s ease-in-out infinite alternate;
}
.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-40px;
  top:90px;
  width:620px;
  height:460px;
  opacity:.20;
  background:
    linear-gradient(rgba(0,135,255,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,135,255,.22) 1px,transparent 1px);
  background-size:28px 28px;
  transform:perspective(900px) rotateX(68deg) rotateZ(-8deg);
  mask-image:radial-gradient(ellipse at center,#000 0 42%,transparent 75%);
}
@keyframes auroraMove{
  from{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  to{transform:translate3d(-26px,22px,0) scale(1.08) rotate(4deg)}
}

@media(max-width:1000px){
  .photoreal-scene{inset:32px 0 0 0}
  .hero-photo,.photo-vignette{inset:48px 0 8px 0;border-radius:24px}
  .coffee-steam{right:112px;top:220px;height:90px}
  .steam-a{right:120px}.steam-b{right:96px}.steam-c{right:142px}
}
@media(max-width:620px){
  .hero-stage{height:340px}
  .photoreal-scene{inset:28px -4px 0 -4px}
  .hero-photo,.photo-vignette{inset:64px 0 10px 0;border-radius:20px}
  .hero-photo{background-position:55% center}
  .live-status{width:155px;height:60px;right:4px;top:5px;padding:10px}
  .live-status svg{width:70px}
  .coffee-steam{right:76px;top:195px;width:22px;height:65px;filter:blur(9px)}
  .steam-a{right:80px}.steam-b{right:62px}.steam-c{right:98px}
}


/* v6: featured work + popups + intake polish */
.case-study-spotlight{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:26px;
  margin:8px 0 22px;
  padding:24px;
  border:1px solid #23495d;
  border-radius:16px;
  background:
    radial-gradient(circle at 15% 25%, rgba(0,134,255,.10), transparent 32%),
    radial-gradient(circle at 86% 76%, rgba(34,240,91,.08), transparent 34%),
    linear-gradient(130deg,#081119,#060a10);
  box-shadow:0 28px 90px rgba(0,0,0,.42);
}
.spotlight-visual{
  min-height:320px;
  border-radius:14px;
  border:1px solid #264758;
  background:
    radial-gradient(circle at 80% 25%, rgba(0,128,255,.12), transparent 26%),
    linear-gradient(145deg,#0b131c,#060c12);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.spotlight-screen{
  position:absolute; left:20px; right:78px; top:32px; bottom:28px;
  border-radius:20px;
  border:1px solid #5d6771;
  background:
    radial-gradient(circle at 25% 70%, rgba(0,118,255,.36), transparent 24%),
    radial-gradient(circle at 78% 76%, rgba(34,240,91,.16), transparent 26%),
    linear-gradient(140deg,#08121b,#101926 52%,#09111a);
  box-shadow:0 25px 55px rgba(0,0,0,.48), 0 0 20px rgba(0,131,255,.06);
}
.spotlight-screen:before{
  content:""; position:absolute; left:5%; right:5%; top:12px; height:3px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
}
.spotlight-ui{
  position:absolute; top:24px; height:78px; border-radius:12px;
  border:1px solid #1e4257;
  background:linear-gradient(180deg,#09131c,#081018);
}
.spotlight-ui.left{left:22px; width:118px}
.spotlight-ui.right{right:22px; width:148px}
.spotlight-chart.bars{
  position:absolute; left:26px; right:40px; bottom:26px; height:88px;
  background:
    linear-gradient(180deg,transparent 30%, rgba(255,255,255,.02)),
    repeating-linear-gradient(90deg,#10a7ff 0 20px, transparent 20px 38px);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent),
             linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
  opacity:.34;
}
.spotlight-chart.line{
  position:absolute; left:24px; right:24px; bottom:58px; height:96px;
  background:linear-gradient(180deg,transparent 30%, rgba(255,255,255,.02));
}
.spotlight-chart.line:before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,transparent 18%, rgba(34,240,91,.0) 18% 22%, rgba(34,240,91,.74) 22% 24%, transparent 24% 40%, rgba(0,181,255,.74) 40% 42%, transparent 42% 62%, rgba(34,240,91,.8) 62% 64%, transparent 64%);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 88%,transparent);
}
.phone-mini{
  position:absolute; right:18px; bottom:34px; width:92px; height:188px;
  border-radius:24px;
  background:linear-gradient(160deg,#5e6871,#2a3037 34%,#0f1318 74%);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.phone-mini:before{
  content:""; position:absolute; inset:8px; border-radius:18px;
  background:
    radial-gradient(circle at 40% 55%, rgba(0,144,255,.42), transparent 26%),
    linear-gradient(145deg,#0b131d,#091019 60%,#081019);
}
.phone-mini:after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); top:12px; width:30px; height:6px; border-radius:0 0 8px 8px; background:#0b1014;
}
.spotlight-copy h3{
  font:700 34px/1 Space Grotesk,sans-serif;
  margin:0 0 14px;
}
.spotlight-copy p{
  color:#b9c7cd;
  line-height:1.65;
  font-size:14px;
}
.spotlight-tags{
  display:flex; flex-wrap:wrap; gap:10px; margin:18px 0;
}
.spotlight-tags span{
  font-size:11px; color:#d8e6ec;
  padding:8px 12px; border-radius:999px;
  background:rgba(6,14,21,.78);
  border:1px solid #2b4d61;
}
.spotlight-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px;
}
.spotlight-stats article{
  border:1px solid #23455a; border-radius:10px; padding:12px;
  background:rgba(8,15,22,.76);
}
.spotlight-stats strong{
  display:block; color:#18aff7; font-size:18px; margin-bottom:7px;
}
.spotlight-stats small{
  display:block; color:#a9bac1; font-size:10px; line-height:1.5;
}
.spotlight-actions{display:flex; gap:12px; margin-top:18px}
.project-grid{margin-top:16px}
.premium-project-modal{
  width:min(950px,96vw);
}
.project-modal-top{
  display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:start;
}
.project-impact-box{
  border:1px solid #294b60;
  border-radius:12px;
  background:linear-gradient(180deg,#08121b,#050a10);
  padding:16px;
}
.project-impact-box small{
  display:block; color:#18b4f0; font-size:10px; letter-spacing:.18em; margin-bottom:12px;
}
.project-impact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.project-impact-grid div{
  border:1px solid #213d50; border-radius:10px; padding:10px;
  background:rgba(7,15,22,.72);
}
.project-impact-grid b{display:block; font-size:9px; color:#7fa4b4; margin-bottom:5px; letter-spacing:.08em}
.project-impact-grid span{display:block; font-size:12px; color:#edf6fa}
.project-pills{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;
}
.project-pills span{
  border:1px solid #29536c; border-radius:999px; padding:8px 12px;
  font-size:11px; background:rgba(7,14,20,.78); color:#d7e6ed;
}
.premium-viz{
  margin-top:20px;
  border:1px solid #274456;
  background:
    radial-gradient(circle at 20% 70%, rgba(0,128,255,.14), transparent 28%),
    linear-gradient(180deg,#08111a,#050a0f);
  border-radius:14px;
  padding:16px;
  min-height:220px;
}
.project-modal-bottom{
  margin-top:20px;
  display:grid;
  grid-template-columns:1fr 320px;
  gap:18px;
}
.modal-cta-box{
  border:1px solid #214a5e;
  border-radius:12px;
  background:linear-gradient(180deg,#08121a,#060b11);
  padding:18px;
}
.modal-cta-box small{
  display:block; color:#22ee60; font-size:10px; letter-spacing:.16em; margin-bottom:10px;
}
.modal-cta-box p{
  margin:0 0 16px; color:#b5c4ca; line-height:1.6; font-size:12px;
}
.premium-contact-modal{
  width:min(860px,96vw);
}
.contact-intro{
  margin:-4px 0 18px; color:#b3c1c8; line-height:1.55; font-size:13px;
}
.check-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.check-grid label{
  display:flex !important;
  align-items:center;
  gap:9px;
  padding:12px;
  border:1px solid #28495b;
  border-radius:10px;
  background:rgba(7,14,20,.76);
}
.check-grid input{
  width:auto !important;
  accent-color:#0aa4ff;
}
.check-grid span{
  font-size:12px;
}
@media(max-width:1000px){
  .case-study-spotlight,
  .project-modal-top,
  .project-modal-bottom{
    grid-template-columns:1fr;
  }
}
@media(max-width:620px){
  .spotlight-stats,
  .check-grid{
    grid-template-columns:1fr;
  }
  .spotlight-actions{
    flex-direction:column;
  }
}


/* v7 intake wizard */
.intake-wizard{width:min(900px,96vw)}
.intake-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.intake-step-label{border:1px solid #315167;border-radius:999px;padding:8px 12px;font-size:11px;color:#cfe4ed;background:#071018}
.intake-progress{height:4px;background:#101d25;border-radius:99px;overflow:hidden;margin:0 0 24px}
.intake-progress span{display:block;width:25%;height:100%;background:linear-gradient(90deg,#0b70ff,#11c7e9,#2bed5b);box-shadow:0 0 16px rgba(0,160,255,.45);transition:.35s}
.intake-step{display:none}.intake-step.active{display:block;animation:stepIn .28s ease}
.intake-step h3{font:600 24px Space Grotesk;margin:0 0 8px}
@keyframes stepIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.choice-grid label{display:block;cursor:pointer}
.choice-grid input{position:absolute;opacity:0;pointer-events:none}
.choice-grid label>span{display:block;min-height:94px;border:1px solid #294b60;border-radius:12px;background:#071019;padding:17px;transition:.2s}
.choice-grid b,.choice-grid small{display:block}
.choice-grid b{font-size:13px}.choice-grid small{font-size:10px;color:#9fb2bb;line-height:1.45;margin-top:7px}
.choice-grid input:checked+span{border-color:#0daef3;background:linear-gradient(145deg,rgba(0,109,255,.13),rgba(0,235,96,.06),#071019);box-shadow:0 0 0 2px rgba(0,143,255,.08),0 14px 34px #0006}
.service-choice-grid{grid-template-columns:repeat(3,1fr)}
.wizard-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.hidden{display:none!important}
.intake-summary{margin-top:18px;border:1px solid #294b60;border-radius:12px;background:#071018;padding:15px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.intake-summary article{border-right:1px solid #1e3948}.intake-summary article:last-child{border-right:0}
.intake-summary small,.intake-summary b{display:block}.intake-summary small{font-size:8px;color:#7899a8;letter-spacing:.13em}.intake-summary b{font-size:11px;margin-top:6px}
.success-modal{text-align:center;max-width:560px}.success-mark{margin:8px auto 20px;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#0b70ff,#26ed5d);color:#031109;font-size:36px;font-weight:800;box-shadow:0 0 40px rgba(0,219,113,.25)}
.success-actions{display:flex;justify-content:center;gap:12px;margin-top:22px}

/* LuART Control */
.control-body{min-height:100vh;background:radial-gradient(circle at 12% 0,rgba(0,111,255,.10),transparent 28%),radial-gradient(circle at 90% 20%,rgba(34,240,91,.07),transparent 25%),#05070b}
.control-header{position:sticky;top:0;z-index:20;background:rgba(4,7,10,.88);backdrop-filter:blur(16px);border-bottom:1px solid #142a36}
.control-nav{height:80px;display:flex;align-items:center;justify-content:space-between}
.control-main{padding-top:40px;padding-bottom:60px}
.control-title{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:28px}.control-title h1{font:700 42px Space Grotesk;margin:0}.control-title>div>p:last-child{color:#99adb7}
.control-actions{display:flex;gap:10px}
.lead-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.lead-kpis article{border:1px solid #234153;border-radius:12px;background:#071018;padding:18px}.lead-kpis small,.lead-kpis strong{display:block}.lead-kpis small{font-size:9px;color:#7fa0ad;letter-spacing:.15em}.lead-kpis strong{font:700 30px Space Grotesk;margin-top:8px;color:#f1f8fb}
.lead-toolbar{display:flex;gap:12px;margin:14px 0}.lead-toolbar input,.lead-toolbar select{background:#071018;border:1px solid #294b60;border-radius:9px;color:white;padding:12px 14px}.lead-toolbar input{flex:1}
.lead-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:15px;align-items:start}
.lead-list,.lead-detail{border:1px solid #213b4b;border-radius:14px;background:#060b11;min-height:550px;overflow:hidden}
.lead-row{width:100%;border:0;border-bottom:1px solid #162b36;background:transparent;color:white;text-align:left;padding:15px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}.lead-row:hover{background:#09131c}
.lead-avatar{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#075eff,#19dc74);color:#03110b;font-weight:800}.lead-main b,.lead-main span,.lead-main small{display:block}.lead-main b{font-size:12px}.lead-main span{font-size:10px;color:#a8bac2;margin-top:3px}.lead-main small{font-size:8px;color:#6f919f;margin-top:6px}.lead-meta{text-align:right}.lead-meta small{display:block;color:#708a95;font-size:8px;margin-top:8px}
.lead-status{display:inline-block;padding:5px 7px;border-radius:999px;font-size:8px;border:1px solid #31566a}.lead-status.new{color:#11bbff}.lead-status.contacted{color:#f3d94d}.lead-status.qualified{color:#24ed65}.lead-status.won{background:#11361d;color:#41f478}.lead-status.closed{color:#8799a2}
.empty-list,.empty-detail{color:#8499a3;text-align:center;padding:70px 25px}.empty-detail span{font-size:48px;color:#0da5ed}.empty-detail h2{color:#e6f0f4}
.lead-detail{padding:22px}.detail-top{display:flex;justify-content:space-between;gap:20px}.detail-top h2{font:600 29px Space Grotesk;margin:0}.detail-top p{color:#92a8b2;font-size:11px}.detail-top select{background:#071018;color:white;border:1px solid #315267;border-radius:8px;padding:10px}
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.detail-grid article{border:1px solid #203b4b;background:#071018;border-radius:9px;padding:12px}.detail-grid small,.detail-grid b{display:block}.detail-grid small,.detail-section>small{color:#6f95a5;font-size:8px;letter-spacing:.12em}.detail-grid b{font-size:10px;margin-top:6px}
.detail-section{margin-top:19px}.detail-section p{color:#b4c5cc;line-height:1.65;font-size:11px}.detail-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}.detail-pills span{border:1px solid #295168;background:#071018;border-radius:999px;padding:7px 10px;font-size:9px}
.detail-section textarea{width:100%;margin-top:9px;background:#050a0f;border:1px solid #29495b;border-radius:9px;color:white;padding:12px}.detail-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}.danger{border:1px solid #72373c!important;color:#ef8d93!important}
@media(max-width:900px){.choice-grid,.service-choice-grid{grid-template-columns:1fr 1fr}.lead-layout{grid-template-columns:1fr}.lead-kpis{grid-template-columns:1fr 1fr}.control-title{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.choice-grid,.service-choice-grid{grid-template-columns:1fr}.intake-summary{grid-template-columns:1fr}.wizard-actions,.success-actions,.control-actions{flex-direction:column}.lead-kpis{grid-template-columns:1fr 1fr}.detail-grid{grid-template-columns:1fr 1fr}}


/* v8 file upload + security scan */
.file-upload-section{margin-top:22px;border:1px solid #27495c;border-radius:14px;background:linear-gradient(180deg,#071019,#050a0f);padding:18px}
.file-upload-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.file-upload-heading h4{font:600 17px Space Grotesk;margin:4px 0 6px}
.file-upload-heading p{font-size:10px;color:#93a8b2;margin:0}
.file-kicker{font-size:8px;letter-spacing:.18em;color:#0fb3ed}
.scan-badge{display:flex;align-items:center;gap:8px;border:1px solid #23526b;border-radius:999px;padding:8px 10px;background:#061018;color:#bdeeff;font-size:8px;white-space:nowrap}
.scan-dot{width:7px;height:7px;border-radius:50%;background:#26ed61;box-shadow:0 0 10px #26ed61}
.upload-dropzone{margin-top:15px;border:1px dashed #37647a;border-radius:12px;background:radial-gradient(circle at 50% 0,rgba(0,140,255,.08),transparent 46%),#061019;min-height:118px;display:flex;align-items:center;justify-content:center;gap:15px;padding:20px;text-align:left;cursor:pointer;transition:.2s}
.upload-dropzone:hover,.upload-dropzone.dragging{border-color:#0eb9f3;background:radial-gradient(circle at 50% 0,rgba(0,149,255,.14),transparent 48%),#07111a;box-shadow:inset 0 0 30px rgba(0,127,255,.05)}
.upload-dropzone input{display:none}
.upload-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#0a6aff,#1ddf72);color:#03100b;font-size:25px;font-weight:800;box-shadow:0 0 25px rgba(0,158,255,.16)}
.upload-dropzone b,.upload-dropzone small{display:block}.upload-dropzone b{font-size:12px}.upload-dropzone small{font-size:9px;color:#829da9;margin-top:6px}
.scan-panel{margin-top:13px;border-top:1px solid #173442;padding-top:14px}
.scan-panel-top{display:flex;align-items:center;justify-content:space-between;gap:18px}.scan-panel-top>div:first-child{display:flex;gap:10px;align-items:center}.scan-status-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid #28536a;color:#15bff6}.scan-panel-top b,.scan-panel-top small{display:block}.scan-panel-top b{font-size:10px}.scan-panel-top small{font-size:8px;color:#819ba7;margin-top:3px}
.scan-meter{width:180px;height:5px;border-radius:999px;background:#11212a;overflow:hidden}.scan-meter span{display:block;width:0;height:100%;background:linear-gradient(90deg,#0a73ff,#20e863);box-shadow:0 0 12px rgba(0,174,255,.35);transition:.25s}
.file-list{display:grid;gap:8px;margin-top:12px}.file-row{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;border:1px solid #213d4d;border-radius:10px;padding:10px;background:#071018}.file-row.blocked{border-color:#6a3035;background:#140b0d}.file-type{font-size:8px;letter-spacing:.1em;color:#0db8ee}.file-info b,.file-info small{display:block}.file-info b{font-size:10px}.file-info small{font-size:8px;color:#78929e;margin-top:3px}.file-result{font-size:8px;font-weight:700;color:#25e85e}.file-row.blocked .file-result{color:#ef6e78}
.security-note{font-size:8px!important;color:#6e8995!important;line-height:1.5!important;margin:12px 0 0!important}
.control-file-list{display:grid;gap:8px;margin-top:10px}.control-file{display:flex;gap:10px;align-items:center;border:1px solid #203b4b;border-radius:9px;background:#071018;padding:10px}.control-file>span{color:#25ed61}.control-file b,.control-file small{display:block}.control-file b{font-size:10px}.control-file small{font-size:8px;color:#7897a4;margin-top:4px}
@media(max-width:620px){.file-upload-heading,.scan-panel-top{flex-direction:column;align-items:flex-start}.scan-meter{width:100%}.scan-badge{white-space:normal}}


/* v9 visual template previews */
.visual-service-grid{
  grid-template-columns:repeat(5,1fr);
}
.visual-service-card{
  padding:0;
  min-height:330px;
  overflow:hidden;
  text-align:left;
}
.visual-service-card .service-preview{
  height:148px;
  border-bottom:1px solid #203a49;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 25% 20%,rgba(0,126,255,.14),transparent 34%),
    radial-gradient(circle at 85% 70%,rgba(34,240,91,.08),transparent 30%),
    linear-gradient(145deg,#0a141e,#060b11);
}
.visual-service-card .service-copy{
  padding:18px 18px 28px;
}
.visual-service-card .service-icon{
  font-size:24px;
  margin:0 0 10px;
}
.visual-service-card h3{font-size:13px}
.visual-service-card p{font-size:10px;min-height:46px}
.preview-label{
  display:block;
  margin-top:13px;
  color:#13bff1;
  font-size:8px;
  letter-spacing:.14em;
}
.service-arrow{
  position:absolute!important;
  right:13px!important;
  left:auto!important;
  bottom:12px!important;
  transform:none!important;
}

/* branding mini visual */
.brand-board{
  position:absolute;
  border:1px solid #315064;
  background:linear-gradient(145deg,#111922,#070c11);
  box-shadow:0 14px 30px rgba(0,0,0,.34);
}
.board-main{
  left:18px;top:17px;width:118px;height:100px;border-radius:7px;padding:13px;
}
.brand-mini-logo{
  font:700 23px Space Grotesk;
  background:linear-gradient(135deg,#0a73ff,#20e967);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-lines{margin-top:11px}.brand-lines i{display:block;height:3px;background:#30424c;margin:5px 0;border-radius:4px}.brand-lines i:nth-child(2){width:70%}.brand-lines i:nth-child(3){width:45%}
.brand-swatches{display:flex;gap:5px;margin-top:9px}.brand-swatches span{width:14px;height:14px;border-radius:50%;background:#0b6cff}.brand-swatches span:nth-child(2){background:#17bed7}.brand-swatches span:nth-child(3){background:#27e865}
.business-card-mini{right:18px;top:25px;width:88px;height:53px;border-radius:6px;padding:10px;transform:rotate(5deg)}.business-card-mini b,.business-card-mini small{display:block}.business-card-mini b{font-size:11px}.business-card-mini small{font-size:5px;color:#6fbcd8;margin-top:4px}
.package-mini{right:35px;bottom:8px;width:58px;height:65px;border-radius:5px;display:grid;place-items:center;transform:rotate(-5deg)}.package-mini span{font:700 17px Space Grotesk;color:#17cbda}

/* website mini visual */
.browser-mini{position:absolute;left:15px;right:15px;top:17px;bottom:17px;border:1px solid #3b5260;border-radius:8px;background:#081018;overflow:hidden}
.browser-top{height:16px;background:#111a21;padding:5px 7px}.browser-top span{display:inline-block;width:4px;height:4px;border-radius:50%;background:#48616d;margin-right:3px}
.web-hero-mini{height:57px;padding:9px;background:radial-gradient(circle at 80% 30%,rgba(31,237,91,.15),transparent 30%),linear-gradient(120deg,#08121b,#0b1723)}.web-hero-mini b{font:700 12px/1 Space Grotesk}.web-hero-mini i{display:block;width:45px;height:4px;background:linear-gradient(90deg,#0a73ff,#20e966);margin-top:7px;border-radius:5px}
.web-cards-mini{display:flex;gap:5px;padding:7px}.web-cards-mini span{flex:1;height:28px;border:1px solid #29465a;border-radius:4px;background:#0a141d}

/* app mini visual */
.app-phone-mini{position:absolute;left:18px;top:17px;width:62px;height:116px;border:2px solid #4b5862;border-radius:14px;background:#070d12;padding:10px;transform:rotate(-5deg)}
.app-notch{position:absolute;top:4px;left:20px;width:20px;height:4px;border-radius:4px;background:#202930}
.app-avatar-dot{width:18px;height:18px;border-radius:50%;background:linear-gradient(145deg,#0c72ff,#23e865);margin-top:9px}
.app-stat-line{height:23px;border-radius:5px;background:linear-gradient(180deg,#0c1822,#091018);border:1px solid #204054;margin-top:8px}
.app-buttons-mini{display:flex;gap:4px;margin-top:7px}.app-buttons-mini span{flex:1;height:18px;border-radius:5px;background:#0c6fff}.app-buttons-mini span:last-child{background:#123326}
.app-tablet-mini{position:absolute;right:14px;top:28px;width:112px;height:90px;border:2px solid #515e67;border-radius:8px;background:#071019;padding:8px;transform:rotate(4deg)}
.app-sidebar{position:absolute;left:7px;top:8px;bottom:8px;width:18px;background:#0c1720;border-radius:3px}.app-chart-mini{margin-left:26px;height:35px;background:linear-gradient(165deg,transparent 45%,#14c6ea 46% 49%,transparent 50%);border-bottom:1px solid #21485d}.app-blocks-mini{display:flex;gap:4px;margin:8px 0 0 26px}.app-blocks-mini span{height:20px;flex:1;background:#0d1923;border:1px solid #254456;border-radius:3px}

/* systems mini visual */
.system-dashboard-mini{position:absolute;left:14px;right:14px;top:18px;bottom:18px;border:1px solid #405865;border-radius:8px;background:#071019;padding:10px 8px 8px 37px}
.system-side-mini{position:absolute;left:7px;top:7px;bottom:7px;width:22px;border-radius:4px;background:#0d1720}
.system-kpis-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.system-kpis-mini span{height:31px;border:1px solid #24465a;border-radius:4px;background:linear-gradient(145deg,#0d1822,#081019)}
.system-table-mini{margin-top:8px;border-top:1px solid #294354}.system-table-mini i{display:block;height:12px;border-bottom:1px solid #182f3c;background:linear-gradient(90deg,rgba(11,115,255,.08),transparent)}

/* automation mini visual */
.automation-flow-mini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px}
.flow-node{width:43px;height:43px;border-radius:11px;border:1px solid #2f596e;background:#09131b;display:grid;place-items:center;font-size:8px;font-weight:700;box-shadow:0 10px 25px #0005}
.flow-node.n1{color:#12b8f0}.flow-node.n2{color:#22ec61}.flow-node.n3{color:#dce8ed}.flow-node.n4{border-radius:50%;color:#25ed63}
.automation-flow-mini i{width:13px;height:1px;background:linear-gradient(90deg,#0d9cf0,#25e966);box-shadow:0 0 7px #0d9cf0}

/* modal visual examples */
.template-showcase{
  margin:20px 0;
  padding-top:17px;
  border-top:1px solid #1d3948;
}
.template-showcase-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}
.template-showcase-head small{color:#15b9ef;font-size:8px;letter-spacing:.16em}
.template-showcase-head span{color:#728e9a;font-size:8px}
.template-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.template-card{border:1px solid #29495b;border-radius:11px;overflow:hidden;background:#071018}
.template-visual{height:116px;position:relative;overflow:hidden;background:radial-gradient(circle at 20% 30%,rgba(0,122,255,.13),transparent 34%),linear-gradient(145deg,#0b151e,#060b11)}
.template-screen{position:absolute;left:13px;right:13px;top:13px;bottom:13px;border:1px solid #375666;border-radius:7px;padding:10px;background:#071019}
.template-screen span{display:block;height:7px;border-radius:3px;background:#203946;margin-bottom:6px}
.template-screen span:nth-child(1){width:36%;background:linear-gradient(90deg,#0b73ff,#20e863)}
.template-screen span:nth-child(2){width:80%;height:20px}
.template-screen span:nth-child(3){width:65%}
.template-screen span:nth-child(4){width:44%}
.template-copy{padding:11px}.template-copy b{font-size:10px}.template-copy p{font-size:8px;line-height:1.45;color:#8fa4ad;margin:6px 0 0}
.template-card:nth-child(2) .template-screen{transform:rotate(2deg);top:16px}.template-card:nth-child(3) .template-screen{transform:rotate(-2deg)}
.luxury-brand .template-screen{background:linear-gradient(145deg,#12161b,#070a0d)}
.retail-brand .template-screen span:nth-child(1){background:linear-gradient(90deg,#14bbef,#24e660)}
.professional-brand .template-screen{background:#0b1117}
.landing-web .template-screen span:nth-child(2){height:34px;background:radial-gradient(circle at 75% 30%,rgba(34,240,91,.18),transparent 30%),#101b25}
.business-web .template-screen{display:grid;grid-template-columns:1fr 1fr;gap:5px}.business-web .template-screen span{width:auto!important;height:auto!important;margin:0}
.shop-web .template-screen span:nth-child(n+2){display:inline-block;width:29%!important;height:47px;margin-right:3%}
.portal-app .template-screen,.staff-app .template-screen,.booking-app .template-screen{border-radius:13px;left:35px;right:35px}
.lead-system .template-screen,.ops-system .template-screen,.client-system .template-screen{display:grid;grid-template-columns:35% 1fr;gap:6px}.lead-system .template-screen span,.ops-system .template-screen span,.client-system .template-screen span{width:auto!important;height:auto!important;margin:0}
.lead-auto .template-screen,.onboard-auto .template-screen,.report-auto .template-screen{display:flex;align-items:center;gap:7px}.lead-auto .template-screen span,.onboard-auto .template-screen span,.report-auto .template-screen span{width:32px!important;height:32px!important;border-radius:50%;margin:0;background:#0c1a23;border:1px solid #235168}.lead-auto .template-screen span:first-child,.onboard-auto .template-screen span:first-child,.report-auto .template-screen span:first-child{background:#0d72ff}
.modal-list-heading{font-size:9px;letter-spacing:.15em;color:#7597a5;margin:18px 0 5px}

@media(max-width:1000px){
  .visual-service-grid{grid-template-columns:repeat(2,1fr)}
  .visual-service-card:last-child{grid-column:span 2}
}
@media(max-width:620px){
  .visual-service-grid{grid-template-columns:1fr}
  .visual-service-card:last-child{grid-column:auto}
  .template-gallery{grid-template-columns:1fr}
  .template-visual{height:145px}
}


/* v10 email response center */
.email-center{border:1px solid #234555;border-radius:14px;background:linear-gradient(135deg,#071019,#060b11);padding:20px 22px;margin-bottom:18px}
.email-center-head{display:flex;align-items:center;justify-content:space-between;gap:24px}.email-center h2{font:600 25px Space Grotesk;margin:0 0 6px}.email-center p:last-child{color:#93a8b1;font-size:10px;margin:0}
.sender-card{border:1px solid #295066;background:#061018;border-radius:11px;padding:13px 16px;min-width:220px}.sender-card small,.sender-card b,.sender-card span{display:block}.sender-card small{font-size:7px;color:#6f95a6;letter-spacing:.16em}.sender-card b{font-size:12px;margin-top:6px}.sender-card span{font-size:8px;color:#e2ad4d;margin-top:4px}
.lead-score-card{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #234c60;border-radius:12px;background:radial-gradient(circle at 0 50%,rgba(0,125,255,.1),transparent 36%),#071018;padding:16px;margin:18px 0}.lead-score-card small,.lead-score-card b{display:block}.lead-score-card small{color:#12b9ef;font-size:8px;letter-spacing:.15em}.lead-score-card b{font-size:15px;margin-top:5px}.lead-score-card p{font-size:9px!important;margin:6px 0 0!important;max-width:540px}
.section-inline-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.mini-action{border:1px solid #2b5268;background:#071019;color:#12b8ef;border-radius:7px;padding:7px 9px;font-size:8px}
.response-history-item{border:1px solid #203b4b;background:#071018;border-radius:9px;padding:11px;margin-top:9px}.response-history-item>div{display:flex;justify-content:space-between;gap:10px}.response-history-item b{font-size:10px}.response-history-item span{font-size:7px;color:#718d99}.response-history-item p{font-size:8px!important;margin:7px 0!important;color:#8ea4ae!important}.response-history-item small{font-size:7px;color:#23e765}.history-empty{margin-top:10px;padding:14px;border:1px dashed #294657;border-radius:8px;color:#748f9b;font-size:9px}
.email-compose-modal{width:min(880px,96vw)}.email-compose-head{display:flex;justify-content:space-between;align-items:start;gap:18px}.email-compose-head h2{margin-top:0}.compose-from{border:1px solid #294e63;border-radius:9px;background:#061018;padding:10px 12px}.compose-from small,.compose-from b{display:block}.compose-from small{font-size:7px;color:#7195a5}.compose-from b{font-size:10px;margin-top:4px}
.compose-meta{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;margin-top:14px}.compose-meta label,.compose-message{display:grid;gap:6px}.compose-meta span,.compose-message span{font-size:8px;color:#7d9aa6;letter-spacing:.12em}.compose-meta input,.compose-message textarea{background:#050a0f;border:1px solid #29495c;border-radius:8px;color:white;padding:11px}.template-strip{margin-top:16px}.template-strip>small{font-size:8px;color:#7896a4;letter-spacing:.14em}.template-buttons{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.template-buttons button{border:1px solid #2b4c60;background:#071018;color:#c8d8df;border-radius:999px;padding:8px 10px;font-size:8px}.template-buttons button:hover{border-color:#10aef0;color:white}
.ai-draft-box{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid #2d5062;border-radius:11px;background:linear-gradient(90deg,rgba(0,116,255,.08),rgba(34,240,91,.04),#071018);padding:13px;margin:15px 0}.ai-draft-box>div:first-child{display:flex;gap:10px;align-items:center}.ai-draft-box b,.ai-draft-box small{display:block}.ai-draft-box b{font-size:10px}.ai-draft-box small{font-size:8px;color:#849da8;margin-top:3px}.ai-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(145deg,#0b70ff,#24e963);box-shadow:0 0 15px #0a8dff}
.compose-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:14px}.compose-footer p{font-size:8px!important;color:#78909a!important;max-width:460px;margin:0!important}.compose-footer>div{display:flex;gap:9px}
@media(max-width:800px){.email-center-head,.lead-score-card,.email-compose-head,.ai-draft-box,.compose-footer{flex-direction:column;align-items:stretch}.compose-meta{grid-template-columns:1fr}.sender-card{min-width:0}.compose-footer>div{flex-direction:column}}

/* v11 production backend */
.downloadable-file{width:100%;text-align:left;color:white;cursor:pointer}
.downloadable-file i{margin-left:auto;font-style:normal;color:#0fb8ef;font-size:8px}
.downloadable-file:hover{border-color:#0faeee;background:#09151f}
.backend-status{font-size:8px;color:#23e961}

/* v12 real visual assets */
.service-image-preview{padding:0!important;background:#050a0f!important}
.service-image-preview img,
.project-image-visual img,
.spotlight-image-visual img{width:100%;height:100%;object-fit:cover;display:block}
.visual-service-card .service-image-preview{height:158px}
.project-image-visual{overflow:hidden}
.project-image-visual img{transition:transform .45s ease}
.project-card:hover .project-image-visual img{transform:scale(1.035)}
.spotlight-image-visual{min-height:340px;overflow:hidden}
.spotlight-image-visual img{object-position:center}


/* v13 real-world examples */
.real-examples-section{padding:85px 0 45px}
.examples-heading{display:flex;justify-content:space-between;gap:45px;align-items:end;margin-bottom:26px}
.examples-heading>div{max-width:700px}.examples-heading h2{font:600 clamp(32px,4vw,56px)/1.02 Space Grotesk;margin:7px 0 0}.examples-heading h2 span{background:linear-gradient(90deg,#1182ff,#16cadb,#28e65f);-webkit-background-clip:text;background-clip:text;color:transparent}
.examples-heading>p{max-width:430px;color:#8ba2ad;font-size:11px;line-height:1.65}
.real-examples-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.real-example-card{position:relative;min-height:340px;border:1px solid #27495c;border-radius:18px;overflow:hidden;background:#071018;box-shadow:0 18px 55px #0005}
.real-example-card.example-wide{grid-column:span 2;min-height:430px}
.real-example-card img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transition:transform .55s ease,filter .55s ease}
.real-example-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(2,7,11,.14) 45%,rgba(2,7,11,.94) 100%)}
.real-example-card:hover img{transform:scale(1.035);filter:saturate(1.05)}
.example-overlay{position:absolute;z-index:2;left:24px;right:24px;bottom:22px}
.example-overlay small{font-size:8px;letter-spacing:.17em;color:#13bbed}.example-overlay h3{font:600 22px Space Grotesk;margin:6px 0;color:#f2f8fb}.example-overlay p{font-size:10px;color:#9db0b9;max-width:620px;margin:0;line-height:1.55}
.examples-cta{margin-top:18px;border:1px solid #285168;border-radius:16px;padding:21px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:radial-gradient(circle at 0 50%,rgba(0,119,255,.1),transparent 36%),radial-gradient(circle at 100% 50%,rgba(37,234,101,.07),transparent 30%),#071018}
.examples-cta small{font-size:8px;letter-spacing:.15em;color:#6fa6b9}.examples-cta h3{font:600 22px Space Grotesk;margin:6px 0 0}
@media(max-width:800px){.examples-heading{flex-direction:column;align-items:flex-start}.real-examples-grid{grid-template-columns:1fr}.real-example-card.example-wide{grid-column:auto}.real-example-card,.real-example-card.example-wide{min-height:330px}.examples-cta{flex-direction:column;align-items:flex-start}}


/* v14 legal + accessibility */
.concept-disclaimer{max-width:760px;margin:8px auto 20px;color:#7f99a4;font-size:9px;line-height:1.55;text-align:center}
.sensitive-upload-warning{margin-top:12px;border:1px solid #58492c;background:#17130b;border-radius:10px;padding:11px 12px}.sensitive-upload-warning b{display:block;color:#f0c86d;font-size:9px;letter-spacing:.08em}.sensitive-upload-warning p{margin:5px 0 0!important;color:#b6a98b!important;font-size:8px!important;line-height:1.5!important}
.legal-consent{display:flex;align-items:flex-start;gap:10px;margin:18px 0 4px;padding:12px;border:1px solid #244858;border-radius:10px;background:#071018;color:#9fb1b9;font-size:9px;line-height:1.5}.legal-consent input{margin-top:2px;accent-color:#15c9d9}.legal-inline-link{border:0;background:none;padding:0;color:#16bbed;text-decoration:underline;cursor:pointer;font:inherit}
.legal-footer{border-top:1px solid #173440;margin-top:70px;background:#04080c}.legal-footer-inner{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding-top:25px;padding-bottom:25px}.legal-footer-brand{display:flex;align-items:center;gap:10px}.legal-footer-brand img{width:38px;height:38px;object-fit:contain}.legal-footer-brand b,.legal-footer-brand small{display:block}.legal-footer-brand b{font:600 14px Space Grotesk}.legal-footer-brand small{font-size:7px;color:#688894;letter-spacing:.12em}.legal-footer-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}.legal-footer-links button,.legal-footer-links a{border:0;background:none;color:#89a2ad;font-size:8px;text-decoration:none;cursor:pointer}.legal-footer-links button:hover,.legal-footer-links a:hover{color:#13bbed}.legal-copyright{font-size:7px;color:#5f7985;white-space:nowrap}
.legal-modal{width:min(860px,94vw);max-height:86vh;overflow:auto}.legal-doc-head{padding-right:40px;border-bottom:1px solid #1d3948;padding-bottom:14px}.legal-doc-head h2{font:600 30px Space Grotesk;margin:4px 0}.legal-doc-head>p:last-child{font-size:8px;color:#718e9a}.legal-doc-body{padding-top:8px}.legal-doc-body h3{font:600 15px Space Grotesk;margin:20px 0 7px;color:#eef6f9}.legal-doc-body p{font-size:10px;line-height:1.7;color:#99adb6}.legal-doc-body a{color:#13bbed}
:focus-visible{outline:2px solid #19c7e8!important;outline-offset:3px!important}
button,a,input,select,textarea{scroll-margin-top:100px}
@media(max-width:760px){.legal-footer-inner{grid-template-columns:1fr;text-align:center}.legal-footer-brand{justify-content:center}.legal-footer-links{justify-content:center}.legal-copyright{white-space:normal}.legal-consent{font-size:10px}}


/* v15 cinematic portfolio upgrade */
.service-image-preview,
.project-image-visual,
.spotlight-image-visual{
  position:relative;
  background:#04090e!important;
  overflow:hidden;
}
.service-image-preview::after,
.project-image-visual::after,
.spotlight-image-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,7,10,.02),rgba(2,7,10,.10)),
    radial-gradient(circle at 50% 50%,transparent 48%,rgba(0,0,0,.26) 100%);
}
.service-image-preview img,
.project-image-visual img,
.spotlight-image-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  image-rendering:auto;
  transform:translateZ(0);
  filter:contrast(1.03) saturate(1.03);
}
.visual-service-card .service-image-preview{
  height:230px!important;
}
.visual-service-card:nth-child(1) .service-image-preview img{object-position:center 52%}
.visual-service-card:nth-child(2) .service-image-preview img{object-position:center 52%}
.visual-service-card:nth-child(3) .service-image-preview img{object-position:center 50%}
.visual-service-card:nth-child(4) .service-image-preview img{object-position:center 48%}
.visual-service-card:nth-child(5) .service-image-preview img{object-position:center 52%}

.project-card .project-image-visual{
  min-height:220px;
}
.project-card .project-image-visual img{
  object-position:center 48%;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .6s ease;
}
.project-card:hover .project-image-visual img{
  transform:scale(1.045);
  filter:contrast(1.05) saturate(1.08);
}
.spotlight-image-visual.cinematic-hero{
  min-height:520px!important;
  border-radius:18px;
}
.spotlight-image-visual.cinematic-hero img{
  object-position:center center;
}
@media(max-width:900px){
  .visual-service-card .service-image-preview{height:190px!important}
  .project-card .project-image-visual{min-height:180px}
  .spotlight-image-visual.cinematic-hero{min-height:350px!important}
}


/* v16 language gate + hidden audio */
body.gate-open{
  overflow:hidden;
}
.language-gate{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 10%, rgba(17,130,255,.18), transparent 34%),
    radial-gradient(circle at 85% 80%, rgba(38,229,96,.10), transparent 24%),
    linear-gradient(180deg, rgba(2,7,11,.96), rgba(2,7,11,.985));
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
  backdrop-filter: blur(8px);
}
.language-gate.show{
  opacity:1;
  visibility:visible;
}
.language-gate-panel{
  width:min(760px,96vw);
  border:1px solid rgba(52,100,121,.85);
  border-radius:28px;
  padding:42px 34px 34px;
  background:
    radial-gradient(circle at 50% 0%, rgba(17,130,255,.10), transparent 36%),
    rgba(7,16,24,.92);
  box-shadow:0 30px 110px rgba(0,0,0,.45);
  text-align:center;
}
.language-gate-logo{
  width:86px;
  height:86px;
  object-fit:contain;
  margin:0 auto 16px;
  filter:drop-shadow(0 8px 22px rgba(17,130,255,.18));
}
.language-gate-kicker{
  margin:0 0 6px;
  color:#6fa6b9;
  font-size:11px;
  letter-spacing:.24em;
}
.language-gate h1{
  margin:0;
  font:600 clamp(34px,5vw,64px)/1.02 "Space Grotesk",sans-serif;
  color:#eff7fa;
}
.language-gate h1 span{
  background:linear-gradient(90deg,#1182ff,#16cadb,#28e65f);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.language-gate-copy{
  max-width:620px;
  margin:18px auto 0;
  color:#9fb3bc;
  font-size:15px;
  line-height:1.65;
}
.language-gate-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:28px;
}
.gate-lang-btn{
  min-width:240px;
  border-radius:14px;
  border:1px solid #2e5d74;
  background:#09141d;
  color:#eef6f9;
  padding:16px 22px;
  font:600 14px/1.1 "Inter",sans-serif;
  letter-spacing:.05em;
  cursor:pointer;
  transition:transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.gate-lang-btn:hover{
  transform:translateY(-2px);
  border-color:#16cadb;
  box-shadow:0 18px 40px rgba(0,0,0,.24);
}
.gate-lang-btn.gate-en{
  background:linear-gradient(180deg, rgba(7,22,32,.95), rgba(5,15,21,.95));
}
.gate-lang-btn.gate-es{
  background:linear-gradient(180deg, rgba(13,21,31,.95), rgba(7,16,24,.95));
}
.language-gate-note{
  display:block;
  margin-top:16px;
  color:#7b949f;
  font-size:12px;
  line-height:1.55;
}
.audio-toggle{
  position:fixed;
  right:20px;
  bottom:20px;
  width:52px;
  height:52px;
  z-index:9000;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(46,93,116,.9);
  background:rgba(6,15,22,.86);
  color:#edf6f9;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  transition:transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.audio-toggle:hover{
  transform:translateY(-2px);
  border-color:#16cadb;
}
.audio-toggle.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.audio-toggle.muted{
  background:rgba(16,18,20,.82);
}
.audio-toggle-icon{
  font-size:20px;
  line-height:1;
}
@media (max-width: 700px){
  .language-gate-panel{
    padding:32px 20px 24px;
    border-radius:22px;
  }
  .gate-lang-btn{
    width:100%;
    min-width:0;
  }
  .audio-toggle{
    right:14px;
    bottom:14px;
    width:48px;
    height:48px;
  }
}


/* v16.2 visual + responsive polish */
.founder-visual{
  min-height:360px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.founder-visual img{
  position:absolute;
  bottom:-8px;
  right:50%;
  transform:translateX(50%);
  width:min(92%, 330px);
  height:auto;
  max-height:350px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 20px 35px #000);
}
.founder-badge{
  top:28px;
  left:18px;
}
.decision-card{
  min-height:0;
  padding:24px 26px;
  gap:22px;
}
.decision-card .btn{
  white-space:nowrap;
}
.project-card .project-image-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.project-card[data-project="logix"] .project-image-visual img{
  object-position:center 50%;
}
@media(max-width:1000px){
  .about-card{grid-template-columns:.9fr 1.1fr}
  .founder-visual{min-height:380px}
  .founder-visual img{width:min(88%, 320px);max-height:370px}
  .decision-card{grid-template-columns:1fr;gap:16px}
  .decision-card .btn{justify-self:start}
}
@media(max-width:620px){
  .founder-visual{min-height:420px}
  .founder-visual img{
    right:50%;
    transform:translateX(50%);
    width:min(86vw, 310px);
    max-height:400px;
    bottom:0;
  }
  .founder-badge{left:14px;top:18px;width:118px}
  .decision-section{padding-top:12px;padding-bottom:12px}
  .decision-card{padding:20px 18px}
}


/* v17 launch candidate — About layout + final portfolio polish */
.about-card{
  grid-template-columns:minmax(330px,.92fr) minmax(420px,1.25fr);
}
.founder-visual{
  min-height:430px;
  overflow:hidden;
  background:
    radial-gradient(circle at 62% 42%, rgba(17,130,255,.12), transparent 34%),
    radial-gradient(circle at 72% 62%, rgba(40,230,95,.08), transparent 28%),
    linear-gradient(180deg, rgba(8,18,27,.78), rgba(5,12,18,.92));
}
.founder-visual img{
  left:auto;
  right:18px;
  bottom:0;
  transform:none;
  width:min(72%, 320px);
  max-height:405px;
  height:auto;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 24px 36px rgba(0,0,0,.58));
}
.founder-badge{
  top:auto;
  bottom:28px;
  left:20px;
  width:145px;
  z-index:3;
}
.project-image-visual img,
.spotlight-image-visual img,
.real-example-card img{
  image-rendering:auto;
}
.project-card[data-project="logix"] .project-image-visual img{
  object-position:center 48%;
}
.real-example-card img{
  object-fit:cover;
}
@media(max-width:1100px){
  .about-card{
    grid-template-columns:minmax(290px,.9fr) minmax(380px,1.1fr);
  }
  .founder-visual img{
    width:min(75%,300px);
    right:10px;
  }
}
@media(max-width:820px){
  .about-card{
    grid-template-columns:1fr;
  }
  .founder-visual{
    min-height:450px;
  }
  .founder-visual img{
    width:min(68vw,320px);
    max-height:430px;
    right:8%;
  }
  .founder-badge{
    left:18px;
    bottom:22px;
  }
}
@media(max-width:560px){
  .founder-visual{
    min-height:410px;
  }
  .founder-visual img{
    width:min(72vw,285px);
    max-height:390px;
    right:2%;
  }
  .founder-badge{
    width:124px;
    left:12px;
    bottom:16px;
  }
}


/* v17.1 — Real-World Directions flow + visual consistency */
.real-examples-section{
  padding:72px 0 52px;
}
.examples-heading{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  align-items:end;
  gap:34px;
  margin-bottom:28px;
}
.examples-heading>div{
  min-width:0;
  max-width:760px;
}
.examples-heading h2{
  max-width:760px;
  font:600 clamp(30px,3.2vw,48px)/1.05 "Space Grotesk",sans-serif;
  letter-spacing:-.035em;
  margin:8px 0 0;
  text-wrap:balance;
}
.examples-heading>p{
  justify-self:end;
  max-width:360px;
  margin:0 0 4px;
  font-size:11px;
  line-height:1.7;
}
.real-examples-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.real-example-card{
  min-height:320px;
  border-radius:16px;
}
.real-example-card.example-wide{
  min-height:390px;
}
.real-example-card::after{
  background:
    linear-gradient(180deg,rgba(2,7,11,.02) 18%,rgba(2,7,11,.12) 45%,rgba(2,7,11,.92) 100%);
}
.example-overlay{
  left:22px;
  right:22px;
  bottom:20px;
}
.example-overlay h3{
  font-size:21px;
  line-height:1.08;
  margin:6px 0 7px;
}
.example-overlay p{
  max-width:78%;
  font-size:10px;
}
.real-example-card:nth-child(2) img{object-position:center 48%}
.real-example-card:nth-child(3) img{object-position:center 50%}
.real-example-card:nth-child(4) img{object-position:center 50%}
.real-example-card:nth-child(5) img{object-position:center 48%}
.real-example-card:nth-child(6) img{object-position:center 42%}
.real-example-card:nth-child(7) img{object-position:center 45%}

.examples-cta{
  margin-top:20px;
  padding:22px 24px;
}
@media(max-width:1050px){
  .examples-heading{
    grid-template-columns:1fr;
    gap:14px;
  }
  .examples-heading>p{
    justify-self:start;
    max-width:680px;
  }
}
@media(max-width:800px){
  .real-examples-section{padding:56px 0 40px}
  .real-examples-grid{grid-template-columns:1fr}
  .real-example-card,
  .real-example-card.example-wide{min-height:310px}
  .example-overlay p{max-width:100%}
}
@media(max-width:520px){
  .examples-heading h2{
    font-size:clamp(28px,9vw,38px);
  }
  .real-example-card,
  .real-example-card.example-wide{
    min-height:280px;
    border-radius:14px;
  }
  .example-overlay{
    left:18px;
    right:18px;
    bottom:17px;
  }
  .example-overlay h3{font-size:19px}
}


/* ==========================================================
   v18 — Editorial Responsive Direction
   Custom cinematic composition, not a boxed agency template.
   ========================================================== */

:root{
  --v18-glow:rgba(0,156,255,.16);
  --v18-green:rgba(34,232,99,.12);
}

/* Wider rhythm and more negative space */
.section{padding-top:92px;padding-bottom:92px}
.section-heading{margin-bottom:34px}

/* HERO — cinematic, asymmetrical */
.hero{
  min-height:760px;
  grid-template-columns:minmax(0,1.04fr) minmax(440px,.96fr);
  gap:64px;
  padding-top:76px;
  padding-bottom:70px;
  position:relative;
}
.hero::before{
  content:"";
  position:absolute;
  width:520px;height:520px;
  left:-260px;top:100px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,124,255,.10),transparent 68%);
  pointer-events:none;
}
.hero-copy{position:relative;z-index:2}
.hero h1{
  font-size:clamp(48px,5.7vw,86px);
  line-height:.94;
  letter-spacing:-.055em;
  max-width:860px;
}
.hero-sub{max-width:700px;font-size:15px;line-height:1.75}
.hero-stage{
  height:600px;
  transform:translateY(24px);
}
.photoreal-scene{
  border-radius:28px 8px 28px 8px;
  box-shadow:0 38px 100px rgba(0,0,0,.45),0 0 70px rgba(0,128,255,.07);
}
.trust-row{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid rgba(46,74,89,.48);
}

/* SERVICES — asymmetric, editorial tiles instead of same-size boxes */
.visual-service-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
}
.visual-service-card{
  min-height:390px;
  border-radius:20px;
  overflow:hidden;
  text-align:left;
  padding:0;
  background:#071018;
}
.visual-service-card:nth-child(1),
.visual-service-card:nth-child(4){
  min-height:470px;
}
.visual-service-card:nth-child(5){
  grid-column:1/-1;
  min-height:330px;
  display:grid;
  grid-template-columns:1.25fr .75fr;
}
.visual-service-card .service-image-preview{
  height:250px!important;
  border-bottom:1px solid rgba(45,79,96,.52);
}
.visual-service-card:nth-child(1) .service-image-preview,
.visual-service-card:nth-child(4) .service-image-preview{height:315px!important}
.visual-service-card:nth-child(5) .service-image-preview{
  height:100%!important;
  min-height:330px;
  border-bottom:0;
  border-right:1px solid rgba(45,79,96,.52);
}
.visual-service-card .service-copy{
  padding:22px 24px 28px;
  text-align:left;
}
.visual-service-card .service-copy h3{font-size:18px;letter-spacing:.08em}
.visual-service-card .service-copy p{max-width:560px;font-size:10px;line-height:1.6}
.visual-service-card .service-arrow{
  left:auto;right:20px;bottom:18px;transform:none;
}

/* REAL-WORLD DIRECTIONS — layered editorial grid */
.real-examples-section{padding:110px 0 76px}
.real-examples-grid{
  grid-template-columns:1.15fr .85fr;
  gap:18px;
  align-items:start;
}
.real-example-card{border-radius:22px}
.real-example-card:nth-child(1){min-height:520px}
.real-example-card:nth-child(2){min-height:330px;margin-top:86px}
.real-example-card:nth-child(3){min-height:390px}
.real-example-card:nth-child(4){min-height:490px;margin-top:-42px}
.real-example-card:nth-child(5){min-height:430px}
.real-example-card:nth-child(6){min-height:360px;margin-top:40px}
.real-example-card:nth-child(7){min-height:390px}
.example-overlay{
  padding-top:70px;
}
.example-overlay h3{
  font-size:clamp(21px,2vw,30px);
  letter-spacing:-.025em;
}
.examples-cta{
  margin-top:34px;
  border-radius:22px;
  padding:28px 30px;
}

/* FEATURED WORK — no uniform 4-card template grid */
.work-editorial-lead{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(260px,.6fr);
  gap:42px;
  align-items:end;
  margin:26px 0 30px;
  padding-top:22px;
  border-top:1px solid rgba(42,73,90,.5);
}
.work-editorial-lead small{
  color:#1bbbea;
  letter-spacing:.17em;
  font-size:8px;
}
.work-editorial-lead h3{
  font:500 clamp(28px,3vw,46px)/1.02 "Space Grotesk",sans-serif;
  letter-spacing:-.04em;
  margin:10px 0 0;
}
.work-editorial-lead h3 span{color:#22e863}
.work-editorial-lead p{
  color:#8fa6b0;
  line-height:1.65;
  font-size:10px;
  margin:0;
}
.editorial-work .project-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:18px;
  align-items:start;
}
.editorial-work .project-card{
  border-radius:20px;
  overflow:hidden;
  text-align:left;
  min-height:380px;
}
.editorial-work .project-card:nth-child(1),
.editorial-work .project-card:nth-child(4){min-height:480px}
.editorial-work .project-card:nth-child(2){margin-top:82px}
.editorial-work .project-card:nth-child(4){margin-top:-64px}
.editorial-work .project-card .project-visual{height:280px}
.editorial-work .project-card:nth-child(1) .project-visual,
.editorial-work .project-card:nth-child(4) .project-visual{height:360px}
.editorial-work .project-card b,
.editorial-work .project-card span{
  margin-left:20px;margin-right:50px;
}
.editorial-work .project-card b{margin-top:18px}
.editorial-work .project-card i{right:18px;bottom:18px}

/* PROCESS — continuous path, no six little boxes */
.editorial-process .process-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:0;
  border-top:1px solid #234455;
  border-bottom:1px solid #183341;
  padding:28px 0 24px;
  background:transparent;
}
.editorial-process .process-grid article{
  background:transparent;
  border:0;
  border-right:1px solid rgba(35,68,85,.58);
  border-radius:0;
  padding:0 20px;
  min-height:150px;
}
.editorial-process .process-grid article:last-child{border-right:0}
.editorial-process .process-grid article:after{display:none!important}
.editorial-process .process-grid article span{
  display:block;
  color:#0ebcf0;
  font:500 11px "Space Grotesk",sans-serif;
  margin-bottom:38px;
}
.editorial-process .process-grid article h3{
  font-size:11px;
  letter-spacing:.12em;
}
.editorial-process .process-grid article p{
  font-size:9px;
  color:#879ca6;
  line-height:1.55;
}

/* DECISION — one strong statement, not a huge empty box */
.decision-card{
  border-radius:24px;
  padding:34px 36px;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.55fr) auto;
  background:
    radial-gradient(circle at 5% 50%,rgba(0,126,255,.15),transparent 34%),
    radial-gradient(circle at 88% 50%,rgba(35,230,94,.08),transparent 30%),
    #071018;
}
.decision-card h2{
  font-size:clamp(23px,2.5vw,37px);
  line-height:1.05;
  letter-spacing:-.03em;
}

/* ABOUT — portrait + narrative; principles become a rail, not metrics/cards */
.editorial-about .about-card{
  position:relative;
  grid-template-columns:minmax(360px,.92fr) minmax(0,1.08fr);
  border-radius:28px;
  min-height:560px;
  overflow:hidden;
  background:
    radial-gradient(circle at 28% 25%,rgba(0,128,255,.12),transparent 34%),
    linear-gradient(135deg,#07131d 0%,#071019 52%,#050b10 100%);
}
.editorial-about .founder-visual{
  min-height:560px;
  background:transparent;
}
.editorial-about .founder-visual img{
  width:min(88%,390px);
  max-height:520px;
  right:4%;
  bottom:0;
  object-position:center bottom;
}
.editorial-about .founder-badge{
  left:22px;
  bottom:26px;
  top:auto;
  max-width:158px;
  z-index:4;
  backdrop-filter:blur(10px);
}
.editorial-about .about-copy{
  padding:72px 64px 110px 46px;
  align-self:center;
}
.editorial-about .about-copy h2{
  font-size:clamp(30px,3.2vw,48px);
  line-height:1.02;
  letter-spacing:-.04em;
}
.editorial-about .about-copy p{
  max-width:640px;
  font-size:11px;
  line-height:1.8;
}
.editorial-about .principles-strip{
  position:absolute;
  left:calc(42% + 10px);
  right:34px;
  bottom:26px;
  border:0;
  border-top:1px solid rgba(37,73,91,.58);
  padding:18px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  background:transparent;
}
.editorial-about .principles-strip span{
  font-size:10px;
  display:flex;
  align-items:center;
}
.editorial-about .principles-strip b{
  font-size:8px;
  letter-spacing:.08em;
}

/* CLOSING */
.closing{
  padding-top:110px;
  padding-bottom:110px;
  border-top:1px solid rgba(39,69,84,.45);
}
.closing h2{
  font-size:clamp(34px,5vw,66px);
  line-height:.98;
  letter-spacing:-.045em;
}

/* ------------------ TABLET ------------------ */
@media(max-width:1000px){
  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    gap:20px;
    padding-top:56px;
  }
  .hero-stage{
    height:500px;
    width:min(760px,100%);
    justify-self:center;
  }
  .visual-service-grid{grid-template-columns:1fr 1fr}
  .visual-service-card:nth-child(5){grid-column:1/-1}
  .real-examples-grid,
  .editorial-work .project-grid{grid-template-columns:1fr 1fr}
  .real-example-card:nth-child(n),
  .editorial-work .project-card:nth-child(n){margin-top:0}
  .editorial-process .process-grid{grid-template-columns:repeat(3,1fr)}
  .editorial-process .process-grid article:nth-child(3){border-right:0}
  .editorial-process .process-grid article:nth-child(-n+3){border-bottom:1px solid rgba(35,68,85,.58);padding-bottom:24px;margin-bottom:24px}
  .decision-card{grid-template-columns:1fr;gap:18px}
  .editorial-about .about-card{grid-template-columns:.9fr 1.1fr}
  .editorial-about .about-copy{padding:52px 36px 120px 26px}
  .editorial-about .principles-strip{left:46%;right:24px}
}

/* ------------------ MOBILE: dedicated composition ------------------ */
@media(max-width:700px){
  .section{padding-top:64px;padding-bottom:64px}
  .container{padding-left:18px;padding-right:18px}

  .hero{
    display:flex;
    flex-direction:column;
    padding-top:42px;
    padding-bottom:42px;
    gap:24px;
  }
  .hero h1{
    font-size:clamp(42px,13vw,58px);
    line-height:.91;
  }
  .hero-sub{font-size:14px}
  .trust-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 12px;
  }
  .hero-stage{
    width:calc(100% + 18px);
    margin-right:-18px;
    height:390px;
    transform:none;
  }
  .photoreal-scene{
    border-radius:24px 0 0 24px;
  }

  /* services become a swipe deck */
  .visual-service-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    margin-left:-18px;
    margin-right:-18px;
    padding:0 18px 12px;
    scrollbar-width:none;
  }
  .visual-service-grid::-webkit-scrollbar{display:none}
  .visual-service-card,
  .visual-service-card:nth-child(1),
  .visual-service-card:nth-child(4),
  .visual-service-card:nth-child(5){
    flex:0 0 84vw;
    min-height:430px;
    display:block;
    scroll-snap-align:center;
  }
  .visual-service-card:nth-child(5) .service-image-preview{
    height:280px!important;
    min-height:0;
    border-right:0;
    border-bottom:1px solid rgba(45,79,96,.52);
  }

  /* real-world examples: strong full-width vertical story */
  .examples-heading{display:block}
  .examples-heading>p{margin-top:16px}
  .real-examples-grid{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .real-example-card,
  .real-example-card.example-wide,
  .real-example-card:nth-child(n){
    min-height:340px;
    margin:0;
  }
  .real-example-card:nth-child(1){min-height:440px}
  .examples-cta{padding:22px 20px}

  /* Featured work is swipeable on phone */
  .work-editorial-lead{
    grid-template-columns:1fr;
    gap:14px;
  }
  .editorial-work .project-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    margin-left:-18px;
    margin-right:-18px;
    padding:0 18px 16px;
    scrollbar-width:none;
  }
  .editorial-work .project-grid::-webkit-scrollbar{display:none}
  .editorial-work .project-card,
  .editorial-work .project-card:nth-child(n){
    flex:0 0 86vw;
    min-height:420px;
    margin:0;
    scroll-snap-align:center;
  }
  .editorial-work .project-card .project-visual,
  .editorial-work .project-card:nth-child(n) .project-visual{height:300px}

  /* process becomes vertical path */
  .editorial-process .process-grid{
    grid-template-columns:1fr;
    padding:4px 0;
    border-bottom:0;
  }
  .editorial-process .process-grid article,
  .editorial-process .process-grid article:nth-child(-n+3){
    border-right:0;
    border-bottom:1px solid rgba(35,68,85,.58);
    min-height:0;
    padding:22px 0;
    margin:0;
    display:grid;
    grid-template-columns:42px 1fr;
    column-gap:12px;
  }
  .editorial-process .process-grid article span{
    grid-row:1/3;
    margin:0;
    padding-top:3px;
  }
  .editorial-process .process-grid article h3{margin:0 0 6px}
  .editorial-process .process-grid article p{margin:0}

  .decision-card{
    padding:26px 22px;
    border-radius:20px;
  }

  /* founder portrait gets its own full-width stage */
  .editorial-about .about-card{
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .editorial-about .founder-visual{
    order:1;
    min-height:480px;
    width:100%;
  }
  .editorial-about .founder-visual img{
    width:min(82vw,340px);
    max-height:450px;
    right:4%;
  }
  .editorial-about .founder-badge{
    left:16px;
    bottom:18px;
    max-width:138px;
  }
  .editorial-about .about-copy{
    order:2;
    padding:34px 24px 28px;
  }
  .editorial-about .principles-strip{
    order:3;
    position:static;
    padding:20px 24px 26px;
    border-top:1px solid rgba(37,73,91,.58);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 12px;
  }
  .closing{
    padding-top:78px;
    padding-bottom:78px;
  }
  .closing h2{
    font-size:clamp(36px,12vw,52px);
  }
}

/* Small phone refinement */
@media(max-width:430px){
  .hero h1{font-size:41px}
  .visual-service-card,
  .visual-service-card:nth-child(n){flex-basis:88vw}
  .editorial-work .project-card,
  .editorial-work .project-card:nth-child(n){flex-basis:89vw}
  .editorial-about .founder-visual{min-height:440px}
  .editorial-about .founder-visual img{
    width:min(86vw,315px);
    max-height:415px;
    right:0;
  }
  .editorial-about .principles-strip{grid-template-columns:1fr}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .visual-service-card,
  .project-card,
  .real-example-card img,
  .audio-toggle{transition:none!important}
}


/* ============================================================
   LuART Control v2 — Owner Command Center
   ============================================================ */
.control-v2{background:#04090e;color:#eaf4f8}
.control-v2 .control-header{background:rgba(3,9,14,.92);border-bottom:1px solid #16303d;backdrop-filter:blur(18px)}
.control-v2 .control-nav{min-height:76px}
.control-nav-actions{display:flex;align-items:center;gap:9px}
.btn.compact{padding:10px 14px;font-size:9px}
.system-pill,.range-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #1d4150;border-radius:999px;padding:9px 12px;font-size:8px;letter-spacing:.1em;color:#9eb4bd}
.system-pill i,.ai-live i{width:7px;height:7px;border-radius:50%;background:#24e764;box-shadow:0 0 14px rgba(36,231,100,.7)}
.command-main{padding-top:34px;padding-bottom:90px}
.command-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:24px 0 32px}
.command-hero h1{font:600 clamp(38px,5vw,68px)/.95 "Space Grotesk",sans-serif;letter-spacing:-.045em;margin:7px 0 11px}
.command-hero>div>p:last-child{color:#8da3ad;max-width:660px}
.command-clock{text-align:right;border-left:1px solid #1b3947;padding-left:28px;min-width:160px}
.command-clock small{display:block;color:#5e8799;font-size:8px;letter-spacing:.15em}
.command-clock strong{display:block;font:500 28px "Space Grotesk";margin:4px 0}
.command-clock span{font-size:9px;color:#78909a}
.control-tabs{display:flex;gap:6px;position:sticky;top:0;z-index:20;background:rgba(4,9,14,.93);backdrop-filter:blur(14px);padding:11px 0;border-top:1px solid #122d39;border-bottom:1px solid #122d39}
.control-tabs button{border:0;background:transparent;color:#718995;padding:11px 14px;border-radius:9px;font:600 9px "Inter";letter-spacing:.08em;cursor:pointer}
.control-tabs button.active{background:#0b1a24;color:#eaf7fb;box-shadow:inset 0 0 0 1px #1e5165}
.control-panel{display:none;padding-top:28px}.control-panel.active{display:block}
.command-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.command-kpis article{padding:20px 20px 18px;border:1px solid #173746;border-radius:16px;background:linear-gradient(145deg,#07141d,#050d13)}
.command-kpis small{display:block;color:#5da6c6;font-size:8px;letter-spacing:.12em}
.command-kpis strong{display:block;font:600 30px "Space Grotesk";margin:8px 0 5px}
.command-kpis span{color:#78909a;font-size:8px}
.command-grid,.analytics-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}
.command-card{border:1px solid #173746;border-radius:18px;background:linear-gradient(145deg,rgba(8,20,29,.96),rgba(4,11,16,.97));padding:22px;min-width:0}
.command-card-head,.crm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:22px}
.command-card-head h2,.crm-head h2{font:600 20px "Space Grotesk";margin:4px 0 0}
.ai-live{display:flex;align-items:center;gap:7px;color:#55e98a;font-size:8px;letter-spacing:.1em}
.brief-list,.priority-list,.demand-list{display:grid;gap:9px;margin-top:18px}
.brief-item{display:flex;gap:12px;padding:13px;border:1px solid #15323f;border-radius:12px;background:#061119}
.brief-item>i{width:8px;height:8px;border-radius:50%;margin-top:4px;background:#1b9ded}.brief-item.warn>i{background:#ffc34e}.brief-item.alert>i{background:#ff6578}.brief-item.good>i{background:#24e764}
.brief-item b{font-size:10px}.brief-item p{font-size:8px;color:#859ba5;line-height:1.55;margin:4px 0 0}
.priority-row{width:100%;display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;text-align:left;border:1px solid #15323f;background:#061119;color:#eaf4f8;padding:12px;border-radius:11px;cursor:pointer}
.priority-row b{display:block;font-size:10px}.priority-row small{color:#748b96;font-size:8px}.priority-row strong{font:600 12px "Space Grotesk";color:#29c7ff}
.priority-dot{width:7px;height:7px;border-radius:50%;background:#87949b}.priority-dot.high{background:#ffbb42}.priority-dot.urgent{background:#ff586b}.priority-dot.low{background:#5d7a87}.priority-dot.normal{background:#20a7ed}
.funnel-bars,.split-meter{display:grid;gap:12px;margin-top:20px}
.funnel-bars>div{display:grid;grid-template-columns:90px 1fr 42px;gap:10px;align-items:center;font-size:8px;color:#8299a3}
.funnel-bars i,.demand-row i,.split-meter i{height:6px;background:#0d2029;border-radius:99px;overflow:hidden}.funnel-bars i b,.demand-row i b,.split-meter i b{display:block;height:100%;background:linear-gradient(90deg,#087dff,#13cbd5,#27e669);border-radius:inherit}
.funnel-bars strong,.demand-row strong{font-size:9px;color:#ddecf2;text-align:right}
.demand-row{display:grid;grid-template-columns:130px 1fr 28px;gap:10px;align-items:center;font-size:8px;color:#8da3ad}
.crm-head{align-items:flex-end;margin-bottom:20px}.crm-head>div>p:last-child{font-size:9px;color:#7c939e}
.pipeline-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:14px}
.pipeline-stage{border:1px solid #173746;background:#061119;color:#eaf4f8;border-radius:13px;padding:14px;text-align:left;cursor:pointer}
.pipeline-stage small{display:block;color:#5599b7;font-size:7px;letter-spacing:.1em}.pipeline-stage strong{display:block;font:600 22px "Space Grotesk";margin:5px 0}.pipeline-stage span{font-size:8px;color:#718a95}
.control-v2 .lead-toolbar{display:grid;grid-template-columns:1fr 180px 180px;gap:9px;margin-bottom:12px}
.control-v2 .lead-layout{grid-template-columns:minmax(300px,.72fr) minmax(520px,1.28fr)}
.control-v2 .lead-list,.control-v2 .lead-detail{border-radius:16px}
.control-v2 .lead-row.active{border-color:#138aca;background:#092030}
.lead-ops-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.lead-ops-grid label{border:1px solid #173746;background:#061119;border-radius:11px;padding:10px}
.lead-ops-grid small{display:block;color:#578fa8;font-size:7px;letter-spacing:.1em;margin-bottom:6px}
.lead-ops-grid input,.lead-ops-grid select{width:100%;border:0;background:transparent;color:#e8f3f7;font-size:9px;outline:none}
.score-orb{width:62px;height:62px;border:1px solid #179ad7;border-radius:50%;display:grid;place-items:center;align-content:center;background:radial-gradient(circle,rgba(0,138,255,.16),transparent 70%);flex:0 0 auto}
.score-orb strong{font:600 20px "Space Grotesk"!important}.score-orb small{font-size:6px!important;margin:0!important}
.lead-score-card{display:flex;align-items:center;gap:14px}.lead-score-card>div:nth-child(2){flex:1}.lead-score-card span{font-size:8px;color:#36d57a}
.analytics-grid .command-card:first-child{grid-column:1/-1}
.micro-chart{height:210px;display:flex;align-items:flex-end;gap:7px;margin-top:18px;padding-top:18px;border-top:1px solid #122c38}
.chart-col{flex:1;min-width:4px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.chart-col i{width:100%;max-width:32px;min-height:3px;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,#17d779,#087bff)}
.chart-col span{font-size:6px;color:#536e7a}
.split-meter>div{display:grid;grid-template-columns:85px 35px 1fr 36px;gap:8px;align-items:center;font-size:8px;color:#88a0aa}
.split-meter small{text-align:right;color:#5caaca}
.communication-feed{display:grid;gap:9px}
.communication-feed article{display:grid;grid-template-columns:62px 1fr 150px;gap:12px;align-items:start;border:1px solid #173746;background:#061119;padding:14px;border-radius:12px}
.communication-feed b{font-size:10px}.communication-feed p{font-size:8px;color:#8197a1;margin:5px 0 0}.communication-feed time{font-size:7px;color:#607984;text-align:right}
.comm-type{font-size:7px;border:1px solid #285166;border-radius:999px;padding:5px 7px;text-align:center;color:#64bde2}.comm-type.sent{color:#52df87;border-color:#276347}.comm-type.draft{color:#f2bd5d;border-color:#66502c}
@media(max-width:980px){
 .command-kpis{grid-template-columns:1fr 1fr}.command-grid,.analytics-grid{grid-template-columns:1fr}
 .pipeline-strip{grid-template-columns:repeat(5,minmax(130px,1fr));overflow:auto;padding-bottom:5px}
 .control-v2 .lead-layout{grid-template-columns:1fr}.lead-ops-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
 .control-nav-actions .system-pill{display:none}.command-hero{align-items:flex-start;flex-direction:column}.command-clock{text-align:left;border-left:0;padding-left:0}
 .control-tabs{overflow:auto}.control-tabs button{white-space:nowrap}
 .command-kpis{grid-template-columns:1fr 1fr}.command-kpis strong{font-size:24px}
 .control-v2 .lead-toolbar{grid-template-columns:1fr}.lead-ops-grid{grid-template-columns:1fr}
 .communication-feed article{grid-template-columns:1fr}.communication-feed time{text-align:left}
 .lead-score-card{align-items:flex-start;flex-wrap:wrap}.lead-score-card .btn{width:100%}
}


/* ==========================================================
   LuART Control v2 — Phase 2 Business OS
   ========================================================== */
.business-os{padding-left:242px}
.os-sidebar{position:fixed;inset:0 auto 0 0;width:242px;background:linear-gradient(180deg,#061019,#03080d);border-right:1px solid #173441;z-index:100;display:flex;flex-direction:column;padding:18px 14px}
.os-brand{display:flex;align-items:center;gap:12px;padding:4px 8px 20px}
.os-brand img{width:48px;height:48px;border-radius:14px;object-fit:cover;box-shadow:0 0 24px rgba(0,140,255,.22)}
.os-brand strong{display:block;font:600 18px "Space Grotesk";letter-spacing:.02em}
.os-brand span{display:block;color:#4fb9dc;font-size:7px;letter-spacing:.18em;margin-top:2px}
.os-nav{display:grid;gap:4px;overflow:auto}
.os-nav button{width:100%;display:grid;grid-template-columns:32px 1fr;align-items:center;border:0;background:transparent;color:#78909c;border-radius:11px;padding:10px;text-align:left;cursor:pointer}
.os-nav button span{width:28px;height:28px;display:grid;place-items:center;border:1px solid #1d3f4e;border-radius:9px;background:#07141d;color:#50bfea}
.os-nav button b{font-size:9px;letter-spacing:.04em}
.os-nav button:hover,.os-nav button.active{background:#0a1b25;color:#edf8fb}
.os-nav button.active span{background:linear-gradient(135deg,#087dff,#13cbd5,#25e765);color:#021018;border-color:transparent}
.os-sidebar-footer{margin-top:auto;padding:16px 8px 4px;display:grid;gap:12px}
.os-sidebar-footer a{font-size:8px;color:#6e8994;text-decoration:none}
.os-shell{min-height:100vh}
.os-topbar{height:72px;border-bottom:1px solid #12303b;display:flex;justify-content:flex-end;align-items:center;padding:0 28px;background:rgba(4,9,14,.8);backdrop-filter:blur(15px);position:sticky;top:0;z-index:60}
.os-mobile-brand{display:none}
.os-topbar-actions{display:flex;align-items:center;gap:16px}
.business-os .command-main{max-width:1500px;margin:0 auto;padding:32px 30px 90px}
.entity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.entity-card{display:flex;gap:14px;border:1px solid #173746;background:#061119;border-radius:15px;padding:16px}
.entity-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#0b78ff,#12cad6,#27e764);color:#041015;font:700 17px "Space Grotesk"}
.entity-card small{color:#52b9df;font-size:7px}.entity-card h3{font:600 14px "Space Grotesk";margin:5px 0}.entity-card p{font-size:8px;color:#77909a;margin:0}
.project-board{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:10px;overflow:auto;padding-bottom:8px}
.project-column{min-width:220px;background:#050d13;border:1px solid #143440;border-radius:15px;padding:10px}
.project-column>header{display:flex;justify-content:space-between;padding:8px 7px 12px;color:#74a9bf;font-size:8px;letter-spacing:.08em}
.project-column>header b{background:#0d2733;border-radius:99px;padding:3px 7px}
.project-column>div{display:grid;gap:8px}
.project-tile{border:1px solid #173b49;background:#07151d;border-radius:12px;padding:13px}
.project-tile small{color:#4fa9cc;font-size:7px}.project-tile h3{font:600 12px "Space Grotesk";margin:6px 0}.project-tile p{font-size:7px;color:#78909a;min-height:22px}.project-tile>div{display:flex;justify-content:space-between;gap:8px;margin-top:12px;font-size:7px;color:#68818c}.project-tile strong{color:#dff5fb}
.project-empty{padding:18px;text-align:center;color:#3d5661}
.file-center{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.file-os-card{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;border:1px solid #173746;background:#061119;color:#eaf4f8;border-radius:12px;padding:12px;text-align:left;cursor:pointer}
.file-os-card>span{width:34px;height:34px;border-radius:10px;background:#0b2531;display:grid;place-items:center;color:#34bce8}.file-os-card b{font-size:9px;display:block}.file-os-card small{font-size:7px;color:#718a95}.file-os-card i{font-style:normal;font-size:7px;color:#51c8ee}
.ai-copilot-layout{display:grid;grid-template-columns:1fr;max-width:900px}
.copilot-prompts{display:flex;flex-wrap:wrap;gap:8px}
.copilot-prompts button{border:1px solid #1b4759;background:#07151d;color:#91a9b4;border-radius:999px;padding:9px 12px;font-size:8px;cursor:pointer}
.copilot-prompts button:hover{border-color:#19b7df;color:#eaf8fb}
.copilot-answer{margin-top:20px;border-top:1px solid #173746;padding-top:22px}.copilot-answer>span{display:inline-grid;width:38px;height:38px;place-items:center;border-radius:12px;background:linear-gradient(135deg,#087dff,#12cad5,#24e765);color:#031017}.copilot-answer h3{font:600 22px "Space Grotesk";margin:13px 0 8px}.copilot-answer p{color:#8198a3;line-height:1.65}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.settings-grid strong{display:block;font:600 18px "Space Grotesk";margin:8px 0}.settings-grid p{font-size:8px;color:#738b96}
@media(max-width:1050px){
 .business-os{padding-left:76px}.os-sidebar{width:76px;padding:14px 8px}.os-brand div,.os-nav button b,.os-sidebar-footer a,.os-sidebar-footer .system-pill b{display:none}.os-brand{justify-content:center;padding:2px 0 18px}.os-brand img{width:48px}.os-nav button{grid-template-columns:1fr;justify-items:center;padding:8px}.os-sidebar-footer{justify-items:center}
 .entity-grid{grid-template-columns:1fr 1fr}.project-board{grid-template-columns:repeat(4,240px)}
}
@media(max-width:700px){
 .business-os{padding-left:0;padding-bottom:72px}.os-sidebar{inset:auto 0 0 0;width:auto;height:68px;flex-direction:row;padding:7px 9px;border-right:0;border-top:1px solid #173441}.os-brand,.os-sidebar-footer{display:none}.os-nav{display:flex;width:100%;justify-content:space-around;overflow-x:auto}.os-nav button{min-width:54px;padding:5px}.os-nav button:nth-child(n+6){display:none}.os-nav button span{width:34px;height:34px}
 .os-topbar{height:62px;padding:0 14px;justify-content:space-between}.os-mobile-brand{display:flex;align-items:center;gap:8px}.os-mobile-brand img{width:34px;height:34px;border-radius:10px}.os-mobile-brand strong{font-size:10px}.os-topbar .command-clock{display:none}
 .business-os .command-main{padding:24px 14px 70px}.entity-grid,.file-center,.settings-grid{grid-template-columns:1fr}.project-board{display:flex;overflow-x:auto}.project-column{flex:0 0 82vw}
}


/* Phase 3 — Secure Owner Access + Ops */
.auth-locked{overflow:hidden}
.control-auth-overlay{position:fixed;inset:0;background:radial-gradient(circle at 50% 25%,rgba(0,130,255,.16),transparent 34%),rgba(2,7,11,.98);z-index:1000;display:none;place-items:center;padding:22px}
.control-auth-overlay.show{display:grid}
.control-auth-card{width:min(460px,100%);border:1px solid #1c4657;background:linear-gradient(145deg,#07131d,#040a0f);border-radius:26px;padding:30px;box-shadow:0 38px 100px rgba(0,0,0,.55)}
.control-auth-card>img{width:76px;height:76px;border-radius:22px;box-shadow:0 0 40px rgba(0,149,255,.24);margin-bottom:18px}
.control-auth-card h1{font:600 32px "Space Grotesk";letter-spacing:-.035em;margin:5px 0 8px}
.auth-copy{color:#8097a1;font-size:9px;line-height:1.6;margin-bottom:18px}
.auth-fields{display:grid;gap:10px}.auth-fields label,.mfa-panel label{display:grid;gap:6px}.auth-fields span,.mfa-panel label span{font-size:7px;color:#6ba4bd;letter-spacing:.1em}
.auth-fields input,.mfa-panel input{width:100%;border:1px solid #1a4050;background:#051018;color:#eaf6fb;border-radius:11px;padding:12px;outline:none}
.auth-main-btn{width:100%;margin-top:12px}.auth-error{font-size:8px;color:#ff8a98;margin:12px 0 0}.auth-recovery{display:block;margin:16px auto 0;border:0;background:transparent;color:#657f8a;font-size:8px;text-decoration:underline;cursor:pointer}
.mfa-panel{margin-top:16px;border-top:1px solid #183744;padding-top:16px;display:grid;gap:12px}.mfa-setup{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:center}.mfa-setup img{width:130px;background:#fff;border-radius:10px}.mfa-setup code{display:block;word-break:break-all;color:#7ddfff;font-size:8px;margin-top:5px}
.project-editor-modal{max-width:760px}.project-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.project-edit-grid label{display:grid;gap:6px}.project-edit-grid label.full{grid-column:1/-1}.project-edit-grid span{font-size:7px;color:#62a7c3;letter-spacing:.1em}.project-edit-grid input,.project-edit-grid select,.project-edit-grid textarea{border:1px solid #183d4b;background:#061119;color:#e9f5fa;border-radius:10px;padding:11px;font:500 9px Inter;outline:none}.modal-actions{display:flex;justify-content:flex-end;margin-top:16px}
.project-tile{cursor:pointer}.proposal-card .entity-icon{font-size:20px}
@media(max-width:620px){.project-edit-grid{grid-template-columns:1fr}.project-edit-grid label.full{grid-column:auto}.mfa-setup{grid-template-columns:1fr}.mfa-setup img{width:150px}}

/* Phase 3.1 auth fix */
#mfaPanel[hidden], #mfaSetup[hidden]{display:none!important}