:root{
  --navy:#12213D;
  --navy-deep:#091326;
  --navy-700:#33456B;
  --navy-500:#6E7FA0;
  --navy-200:#C3CBDA;
  --navy-50:#EEF1F6;
  --teal:#0E7C86;
  --teal-light:#5FC7CF;
  --teal-wash:#E9F4F5;
  --signal:#2F6FED;
  --signal-hover:#2559C7;
  --mist:#F5F7FA;
  --white:#FFFFFF;
  --slate:#8A94A6;
  --ink:#12213D;
  --font-display:'Switzer','Inter','Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --max:1180px;
  --shadow-sm:0 12px 34px rgba(18,33,61,.08);
  --shadow-md:0 28px 80px rgba(18,33,61,.15);
  --shadow-blue:0 14px 34px rgba(47,111,237,.28);
}
.lf-web-design-page,.lf-web-design-page *{box-sizing:border-box}
.lf-web-design-page{background:var(--white);color:var(--navy-700);font-family:var(--font-body);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
.lf-web-design-page a{color:inherit;text-decoration:none}
.lf-web-design-page button,.lf-web-design-page input{font:inherit}
.lf-web-design-page button{cursor:pointer}
.lf-web-design-page img,.lf-web-design-page svg{display:block;max-width:100%}
.lf-web-design-page ::selection{background:var(--teal-wash);color:var(--navy)}
.lf-web-design-page :focus-visible{outline:3px solid rgba(47,111,237,.38);outline-offset:4px;border-radius:8px}
.lf-web-design-page .shell{width:min(var(--max),calc(100% - 48px));margin-inline:auto}
.lf-web-design-page .section-pad{padding:112px 0}
.lf-web-design-page h1,.lf-web-design-page h2,.lf-web-design-page h3,.lf-web-design-page h4{font-family:var(--font-display);color:var(--navy);letter-spacing:-.035em;line-height:1.08;margin:0}
.lf-web-design-page p{margin:0}
.lf-web-design-page .button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border:1px solid transparent;border-radius:10px;font-weight:600;font-size:.93rem;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;color:var(--navy)}
.lf-web-design-page .button-primary{background:var(--signal);color:#fff;box-shadow:var(--shadow-blue)}
.lf-web-design-page .button-primary:hover{background:var(--signal-hover);transform:translateY(-2px)}
.lf-web-design-page .button-secondary{background:rgba(255,255,255,.9);border-color:var(--navy-200);color:var(--navy)}
.lf-web-design-page .button-secondary:hover{border-color:var(--navy-500);transform:translateY(-2px)}
.lf-web-design-page .text-link{color:#fff;font-weight:600;font-size:.92rem}
.lf-web-design-page .text-link:hover{text-decoration:underline;text-underline-offset:4px}
.lf-web-design-page .eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--teal);font-weight:650;font-size:.73rem;letter-spacing:.15em;text-transform:uppercase}
.lf-web-design-page .eyebrow::before{content:"";width:24px;height:2px;background:currentColor;border-radius:99px}
.lf-web-design-page .eyebrow-light{color:var(--teal-light)}
.lf-web-design-page .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.lf-web-design-page .reveal.is-visible{opacity:1;transform:none}

/* Hero */
.hero{min-height:calc(100vh - 112px);display:flex;align-items:center;position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(18,33,61,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(18,33,61,.035) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to right,black,transparent 78%)}
.hero-grid{position:relative;display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:center;z-index:1}
.hero-copy{max-width:610px}
.hero h1{font-size:clamp(3.2rem,5.5vw,5.4rem);margin:22px 0 26px;letter-spacing:-.055em;text-wrap:balance}
.hero h1 span{color:var(--teal)}
.hero-lede{font-size:1.16rem;line-height:1.75;max-width:58ch;color:var(--navy-700)}
.hero-actions{display:flex;gap:14px;margin:34px 0 46px;flex-wrap:wrap}
.hero-proof{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--navy-200);max-width:580px}
.hero-proof>div{padding:20px 20px 0 0}.hero-proof>div+div{border-left:1px solid var(--navy-200);padding-left:20px}
.hero-proof strong{display:block;font-family:var(--font-display);font-size:1.02rem;color:var(--navy)}
.hero-proof span{display:block;color:var(--navy-500);font-size:.77rem;margin-top:2px}
.hero-canvas{height:620px;position:relative;perspective:1400px}
.ambient{position:absolute;border-radius:50%;filter:blur(4px);opacity:.85}
.ambient-a{width:350px;height:350px;background:radial-gradient(circle,rgba(95,199,207,.34),rgba(95,199,207,0) 70%);right:-90px;top:30px}
.ambient-b{width:420px;height:420px;background:radial-gradient(circle,rgba(18,33,61,.1),rgba(18,33,61,0) 72%);left:-10px;bottom:-120px}
.orbit{position:absolute;border:1px solid rgba(14,124,134,.18);border-radius:50%;animation:orbitSpin 28s linear infinite}
.orbit-one{width:520px;height:520px;right:-70px;top:35px}.orbit-two{width:380px;height:380px;right:0;top:105px;animation-direction:reverse;animation-duration:22s}
.orbit::after{content:"";position:absolute;width:8px;height:8px;background:var(--teal);border-radius:50%;top:48px;right:80px;box-shadow:0 0 0 8px rgba(14,124,134,.1)}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.parallax-layer{will-change:transform;transition:transform .12s linear}
.browser-card{position:absolute;z-index:4;width:560px;height:400px;left:-10px;top:78px;background:#fff;border:1px solid var(--navy-200);border-radius:18px;box-shadow:0 36px 100px rgba(18,33,61,.2);overflow:hidden;transform:rotateY(-5deg) rotateX(2deg)}
.browser-bar{height:44px;border-bottom:1px solid var(--navy-50);display:flex;align-items:center;padding:0 15px;gap:14px;background:#fbfcfd}
.browser-dots{display:flex;gap:5px}.browser-dots i{width:7px;height:7px;border-radius:50%;background:var(--navy-200)}.browser-dots i:nth-child(2){background:var(--navy-500)}.browser-dots i:nth-child(3){background:var(--teal)}
.browser-address{height:22px;flex:1;border-radius:6px;background:var(--navy-50);font-size:.62rem;color:var(--navy-500);display:flex;align-items:center;padding:0 10px}.browser-action{width:20px;height:20px;border:1px solid var(--navy-200);border-radius:6px}
.browser-body{height:356px;padding:24px 26px;background:linear-gradient(135deg,#fff 0%,#f8fafc 100%)}
.browser-nav{display:flex;justify-content:space-between;align-items:center}.mini-brand{display:flex;align-items:center;gap:7px;font-size:.68rem;font-weight:600;color:var(--navy)}.mini-brand span{width:17px;height:17px;border:2px solid var(--navy);position:relative}.mini-brand span::after{content:"";position:absolute;inset:4px;border:2px solid var(--teal)}
.mini-links{display:flex;gap:12px}.mini-links i{width:30px;height:4px;background:var(--navy-50);border-radius:5px}.mini-links i:first-child{background:var(--navy-200)}
.browser-layout{display:grid;grid-template-columns:1fr .9fr;gap:20px;align-items:center;height:230px}.tiny-label{font-size:.52rem;color:var(--teal);letter-spacing:.14em;font-weight:700}.browser-copy h3{font-size:2rem;margin:9px 0 10px}.browser-copy p{font-size:.7rem;line-height:1.6;color:var(--navy-500)}.demo-button{margin-top:16px;background:var(--signal);color:#fff;border:0;border-radius:6px;padding:9px 14px;font-size:.62rem;font-weight:600}
.browser-art{position:relative;height:180px}.art-frame{position:absolute;border:2px solid var(--navy);border-radius:6px}.art-frame-1{inset:14px 24px 2px 0}.art-frame-2{inset:34px 4px 22px 34px;border-color:var(--teal)}.art-core{position:absolute;width:62px;height:62px;background:var(--navy);right:52px;top:65px;border-radius:50%;box-shadow:22px 24px 0 rgba(14,124,134,.2)}
.browser-footer-row{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:10px}.browser-footer-row span{height:34px;border:1px solid var(--navy-50);border-radius:7px;background:#fff}
.phone-card{position:absolute;z-index:7}.phone-shell{width:190px;height:390px;background:var(--navy-deep);border-radius:31px;padding:7px;box-shadow:0 32px 70px rgba(18,33,61,.28);border:1px solid rgba(255,255,255,.25);position:relative}.phone-notch{position:absolute;z-index:2;width:72px;height:18px;top:8px;left:50%;transform:translateX(-50%);background:var(--navy-deep);border-radius:0 0 12px 12px}.phone-screen{height:100%;border-radius:25px;overflow:hidden;padding:27px 13px 14px}.phone-front{right:5px;bottom:42px;transform:rotate(5deg)}.phone-back{right:138px;top:2px;z-index:2;transform:scale(.82) rotate(-8deg)}
.mobile-status{display:flex;justify-content:space-between;font-size:.52rem;font-weight:600}.mobile-status i{width:20px;height:5px;border-radius:5px;background:currentColor;opacity:.65}.screen-finance{background:#f4f8f8;color:var(--navy)}.app-head{display:flex;justify-content:space-between;align-items:center;margin-top:15px}.avatar{width:25px;height:25px;border-radius:50%;background:var(--navy);color:#fff;font-size:.45rem;display:grid;place-items:center}.app-dot{width:7px;height:7px;background:var(--teal);border-radius:50%}.screen-kicker{font-size:.45rem;letter-spacing:.1em;color:var(--navy-500);margin-top:25px}.screen-finance h4{font-size:1.45rem;margin-top:3px}.mini-chart{height:70px;color:var(--teal);margin-top:8px}.mini-chart svg{width:100%;height:100%}.screen-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:3px 0 15px}.screen-actions span{height:34px;border-radius:9px;background:#fff;border:1px solid var(--navy-50)}.transaction{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--navy-50);font-size:.47rem}.transaction>i{width:23px;height:23px;border-radius:8px;background:var(--teal-wash)}.transaction div{flex:1}.transaction b,.transaction small{display:block}.transaction small{color:var(--navy-500)}.transaction strong{font-size:.48rem}
.screen-wellness{background:linear-gradient(180deg,#15304e,#0d1b31);color:#fff;text-align:center}.wellness-orb{width:110px;height:110px;margin:42px auto 17px;border:1px solid rgba(95,199,207,.5);border-radius:50%;display:grid;place-content:center;box-shadow:inset 0 0 0 12px rgba(95,199,207,.05),0 0 40px rgba(95,199,207,.15)}.wellness-orb span{font-family:var(--font-display);font-size:1.8rem;line-height:1}.wellness-orb small{font-size:.48rem;color:var(--teal-light)}.screen-wellness h4{color:#fff;font-size:1rem}.screen-wellness>p{font-size:.48rem;color:var(--navy-200);margin-top:5px}.wellness-card{display:flex;text-align:left;align-items:center;gap:8px;margin-top:22px;padding:10px;border-radius:10px;background:rgba(255,255,255,.08)}.wellness-card>i{width:22px;height:22px;border-radius:50%;background:var(--teal-light)}.wellness-card div{flex:1}.wellness-card b,.wellness-card small{display:block;font-size:.46rem}.wellness-card small{color:var(--navy-200)}.wellness-bars{display:flex;align-items:flex-end;gap:4px;height:42px;margin-top:16px}.wellness-bars span{flex:1;background:rgba(95,199,207,.25);border-radius:4px;height:30%}.wellness-bars span:nth-child(2){height:55%}.wellness-bars span:nth-child(3){height:38%}.wellness-bars span:nth-child(4){height:80%;background:var(--teal-light)}.wellness-bars span:nth-child(5){height:62%}.wellness-bars span:nth-child(6){height:92%}.wellness-bars span:nth-child(7){height:50%}
.floating-pill{position:absolute;z-index:9;padding:10px 14px;border:1px solid var(--navy-50);background:rgba(255,255,255,.95);box-shadow:var(--shadow-sm);border-radius:99px;font-size:.68rem;color:var(--navy);font-weight:600;display:flex;align-items:center;gap:7px}.floating-pill span{width:7px;height:7px;background:var(--teal);border-radius:50%;box-shadow:0 0 0 5px rgba(14,124,134,.1)}.pill-a{left:42px;bottom:58px}.pill-b{right:12px;top:62px}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;color:var(--navy-500);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em}.scroll-cue span{width:1px;height:34px;background:linear-gradient(var(--teal),transparent);animation:scrollCue 1.8s ease-in-out infinite}@keyframes scrollCue{50%{transform:scaleY(.55);transform-origin:top}}

/* Marquee */
.capability-strip{background:var(--navy);color:#fff;overflow:hidden;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.marquee{overflow:hidden}.marquee-track{display:flex;width:max-content;align-items:center;gap:24px;padding:20px 0;animation:marquee 32s linear infinite}.marquee-track span{font-family:var(--font-display);font-size:.82rem;font-weight:500;white-space:nowrap;color:var(--navy-200)}.marquee-track i{width:6px;height:6px;border-radius:50%;background:var(--teal-light)}@keyframes marquee{to{transform:translateX(-50%)}}

/* Shared headings */
.section-heading{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.75fr);gap:80px;align-items:end;margin-bottom:56px}.section-heading h2{font-size:clamp(2.25rem,4vw,3.7rem);margin-top:18px}.section-heading p{font-size:1.05rem;color:var(--navy-500);max-width:48ch}

/* Interactive showcase */
.showcase{background:var(--mist)}
.experience-shell{background:#fff;border:1px solid var(--navy-50);border-radius:24px;box-shadow:var(--shadow-sm);overflow:hidden}
.experience-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--navy-50);padding:10px}
.experience-tab{border:0;background:transparent;border-radius:12px;padding:15px 20px;color:var(--navy-500);font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;transition:.2s}
.experience-tab span{font-size:.68rem;color:var(--navy-500)}.experience-tab:hover{background:var(--mist);color:var(--navy)}.experience-tab.is-active{background:var(--signal);color:#fff;box-shadow:0 10px 24px rgba(47,111,237,.22)}.experience-tab.is-active span{color:#fff}
.experience-stage{margin:24px;background:#f7f8fa;border:1px solid var(--navy-50);border-radius:16px;overflow:hidden;min-height:620px;position:relative}
.stage-toolbar{height:46px;background:#fff;border-bottom:1px solid var(--navy-50);display:flex;align-items:center;gap:16px;padding:0 14px}.stage-toolbar>div{display:flex;gap:5px}.stage-toolbar i{width:7px;height:7px;border-radius:50%;background:var(--navy-200)}.stage-toolbar i:nth-child(2){background:var(--navy-500)}.stage-toolbar i:nth-child(3){background:var(--teal)}.stage-toolbar>span{flex:1;height:24px;background:var(--mist);border-radius:6px;display:grid;place-items:center;font-size:.65rem;color:var(--navy-500)}.stage-refresh{border:1px solid var(--navy-200);width:28px;height:28px;border-radius:7px;background:#fff;color:var(--signal);font-weight:700}.stage-refresh:hover{background:var(--signal);color:#fff;border-color:var(--signal)}
.stage-view{position:absolute;inset:46px 0 0;opacity:0;transform:translateY(18px) scale(.99);pointer-events:none;transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1)}.stage-view.is-active{opacity:1;transform:none;pointer-events:auto}
.view-brand{display:grid;grid-template-columns:180px 1fr;background:#eee8df}.brand-sidebar{padding:38px 26px;display:flex;flex-direction:column;border-right:1px solid rgba(18,33,61,.12)}.brand-mark{font-family:var(--font-display);font-weight:700;letter-spacing:.13em;color:var(--navy);font-size:.78rem;display:flex;align-items:center;gap:9px}.brand-mark i{width:18px;height:18px;border:1px solid var(--navy);border-radius:50%;position:relative}.brand-mark i::after{content:"";position:absolute;inset:5px;background:var(--teal);border-radius:50%}.brand-menu{display:grid;grid-template-columns:22px 1fr;gap:18px 10px;margin:auto 0;font-size:.66rem}.brand-menu b{color:var(--teal);font-weight:500}.brand-menu span{font-weight:600;color:var(--navy)}.brand-sidebar small{font-size:.58rem;color:var(--navy-500)}.brand-main{display:grid;grid-template-columns:1.1fr .9fr}.brand-hero-image{position:relative;overflow:hidden;background:linear-gradient(150deg,#d8d1c8,#f3eee8)}.architectural-lines i{position:absolute;background:rgba(18,33,61,.22)}.architectural-lines i:nth-child(1){width:1px;height:100%;left:28%}.architectural-lines i:nth-child(2){height:1px;width:100%;top:68%}.architectural-lines i:nth-child(3){width:1px;height:100%;right:22%}.architectural-lines i:nth-child(4){height:1px;width:70%;top:26%;right:0}.brand-object{position:absolute;width:250px;height:340px;left:50%;top:52%;transform:translate(-50%,-50%);border:1px solid rgba(18,33,61,.35);border-radius:50% 50% 42% 42%;background:linear-gradient(155deg,rgba(255,255,255,.55),rgba(18,33,61,.08));box-shadow:inset -28px -20px 50px rgba(18,33,61,.08),0 30px 60px rgba(18,33,61,.12)}.brand-object span{position:absolute;width:90px;height:90px;border-radius:50%;background:var(--teal);left:50%;top:49%;transform:translate(-50%,-50%);box-shadow:0 0 0 24px rgba(14,124,134,.1)}.brand-index{position:absolute;right:26px;bottom:20px;font-family:var(--font-display);font-size:5rem;color:rgba(18,33,61,.08)}.brand-statement{padding:54px 44px;display:flex;flex-direction:column;justify-content:center}.brand-statement span{font-size:.63rem;text-transform:uppercase;letter-spacing:.18em;color:var(--teal);font-weight:700}.brand-statement h3{font-size:3.2rem;margin-top:26px;font-weight:500}
.view-commerce{background:#f1efeb;padding:28px 34px}.commerce-top{display:flex;justify-content:space-between;font-size:.65rem;font-weight:700;letter-spacing:.1em;color:var(--navy);margin-bottom:25px}.commerce-top div{display:flex;gap:26px;letter-spacing:0}.commerce-grid{display:grid;grid-template-columns:1fr 1fr .9fr;gap:16px;height:500px}.product-tile,.product-copy{background:#e5e1dc;position:relative;overflow:hidden;padding:20px}.product-b{background:#d9dfdd}.product-tile>span,.product-tile>b{position:absolute;bottom:18px;font-size:.65rem}.product-tile>span{left:20px}.product-tile>b{right:20px;color:var(--navy)}.product-object{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%)}.chair{width:160px;height:210px;border:2px solid var(--navy);border-radius:40% 40% 20% 20%;background:linear-gradient(145deg,#415875,#182944)}.chair i:nth-child(1),.chair i:nth-child(2){position:absolute;width:8px;height:120px;background:var(--navy);bottom:-75px}.chair i:nth-child(1){left:22px;transform:rotate(6deg)}.chair i:nth-child(2){right:22px;transform:rotate(-6deg)}.chair i:nth-child(3){position:absolute;width:120px;height:12px;background:rgba(255,255,255,.14);left:18px;top:98px;border-radius:20px}.lamp{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 50% 42%,#fff 0 12%,#c3cbda 13% 38%,#12213d 40% 43%,transparent 44%)}.lamp i:first-child{position:absolute;width:3px;height:115px;background:var(--navy);left:50%;top:125px}.lamp i:last-child{position:absolute;width:72px;height:8px;background:var(--navy);left:54px;top:235px;border-radius:50%}.product-copy{background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:flex-end}.product-copy span{font-size:.56rem;letter-spacing:.14em;color:var(--teal-light)}.product-copy h3{color:#fff;font-size:2.15rem;margin:20px 0 28px}.product-copy button{align-self:flex-start;background:var(--signal);color:#fff;border:0;border-radius:7px;padding:10px 14px;font-size:.65rem;font-weight:600}
.view-dashboard{display:grid;grid-template-columns:72px 1fr;background:#f5f7fa}.dash-side{background:var(--navy);padding:20px 17px;display:flex;align-items:center;flex-direction:column;gap:26px}.dash-logo{width:30px;height:30px;border:2px solid #fff;position:relative;margin-bottom:12px}.dash-logo i{position:absolute;inset:7px;border:2px solid var(--teal-light)}.dash-side b{width:24px;height:6px;border-radius:8px;background:rgba(255,255,255,.18)}.dash-side b:nth-of-type(1){background:var(--teal-light)}.dash-side small{margin-top:auto;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14)}.dash-main{padding:34px 38px}.dash-head{display:flex;align-items:center;gap:18px}.dash-head>div:first-child{flex:1}.dash-head span{font-size:.68rem;color:var(--navy-500)}.dash-head h3{font-size:1.65rem;margin-top:3px}.dash-search{width:140px;height:34px;border-radius:8px;background:#fff;border:1px solid var(--navy-50)}.dash-avatar{width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:.65rem}.dash-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0 16px}.dash-metrics article{padding:20px;background:#fff;border:1px solid var(--navy-50);border-radius:12px}.dash-metrics span{display:block;color:var(--navy-500);font-size:.64rem}.dash-metrics strong{display:inline-block;font-family:var(--font-display);font-size:1.5rem;color:var(--navy);margin-top:8px}.dash-metrics small{float:right;color:var(--teal);font-size:.62rem;margin-top:13px}.dash-grid{display:grid;grid-template-columns:1.7fr .8fr;gap:16px}.dash-chart-card,.dash-activity{background:#fff;border:1px solid var(--navy-50);border-radius:12px;padding:20px}.dash-card-head{display:flex;justify-content:space-between;font-size:.68rem}.dash-card-head span{color:var(--navy-500)}.dash-chart{height:190px;position:relative;color:var(--teal);padding-top:26px}.dash-chart>i{position:absolute;left:0;right:0;height:1px;background:var(--navy-50)}.dash-chart>i:nth-child(1){top:28px}.dash-chart>i:nth-child(2){top:80px}.dash-chart>i:nth-child(3){top:130px}.dash-chart>i:nth-child(4){top:180px}.dash-chart svg{width:100%;height:100%}.dash-activity>b{font-size:.72rem;color:var(--navy)}.dash-activity>div{display:flex;gap:9px;margin-top:18px;align-items:center}.dash-activity i{width:26px;height:26px;border-radius:8px;background:var(--teal-wash)}.dash-activity span{flex:1}.dash-activity strong,.dash-activity small{display:block;font-size:.6rem}.dash-activity small{color:var(--navy-500);margin-top:2px}

/* Mobile section */
.mobile-section{background:var(--navy);color:#fff;overflow:hidden;position:relative}.mobile-section::before{content:"";position:absolute;width:800px;height:800px;border:1px solid rgba(95,199,207,.12);border-radius:50%;right:-350px;top:-180px;box-shadow:0 0 0 100px rgba(95,199,207,.025),0 0 0 200px rgba(95,199,207,.018)}
.mobile-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center;position:relative}.mobile-copy h2{font-size:clamp(2.5rem,4.5vw,4.2rem);color:#fff;margin:20px 0 24px}.mobile-copy>p{color:var(--navy-200);font-size:1.05rem;max-width:50ch}.mobile-feature-list{margin-top:40px;border-top:1px solid rgba(255,255,255,.12)}.mobile-feature-list>div{display:grid;grid-template-columns:36px 1fr;gap:4px 14px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12)}.mobile-feature-list span{grid-row:1/3;color:var(--teal-light);font-size:.72rem;padding-top:3px}.mobile-feature-list strong{font-family:var(--font-display);font-size:.95rem}.mobile-feature-list small{color:var(--navy-200);font-size:.76rem}.mobile-controls{display:flex;align-items:center;gap:14px;margin-top:30px}.mobile-controls>button{width:42px;height:42px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;border-radius:50%;font-size:1rem}.mobile-controls>button:hover{background:var(--signal);border-color:var(--signal)}.phone-dots{display:flex;gap:7px}.phone-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.25)}.phone-dots button.is-active{width:24px;border-radius:99px;background:var(--signal)}
.phone-gallery{height:650px;position:relative;perspective:1200px}.phone-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(95,199,207,.24),rgba(95,199,207,0) 68%);left:50%;top:50%;transform:translate(-50%,-50%)}.gallery-phone{position:absolute;top:50%;left:50%;transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .45s ease,filter .45s ease;will-change:transform}.device{width:240px;height:500px;background:#050b16;border:1px solid rgba(255,255,255,.26);border-radius:40px;padding:8px;box-shadow:0 38px 100px rgba(0,0,0,.45);position:relative}.device-speaker{position:absolute;z-index:3;top:10px;left:50%;transform:translateX(-50%);width:82px;height:20px;border-radius:0 0 15px 15px;background:#050b16}.device-screen{height:100%;border-radius:32px;overflow:hidden;padding:30px 17px 16px;color:var(--navy)}.phone-center{z-index:3;transform:translate(-50%,-50%) scale(1)}.phone-left{z-index:1;transform:translate(-118%,-48%) rotateY(18deg) scale(.82);opacity:.55;filter:saturate(.75)}.phone-right{z-index:1;transform:translate(18%,-48%) rotateY(-18deg) scale(.82);opacity:.55;filter:saturate(.75)}.phone-gallery[data-phone-index="1"] .phone-center{transform:translate(-118%,-48%) rotateY(18deg) scale(.82);z-index:1;opacity:.55;filter:saturate(.75)}.phone-gallery[data-phone-index="1"] .phone-right{transform:translate(-50%,-50%) scale(1);z-index:3;opacity:1;filter:none}.phone-gallery[data-phone-index="1"] .phone-left{transform:translate(18%,-48%) rotateY(-18deg) scale(.82)}.phone-gallery[data-phone-index="2"] .phone-center{transform:translate(18%,-48%) rotateY(-18deg) scale(.82);z-index:1;opacity:.55;filter:saturate(.75)}.phone-gallery[data-phone-index="2"] .phone-right{transform:translate(-118%,-48%) rotateY(18deg) scale(.82)}.phone-gallery[data-phone-index="2"] .phone-left{transform:translate(-50%,-50%) scale(1);z-index:3;opacity:1;filter:none}
.status-row{display:flex;justify-content:space-between;font-size:.58rem;font-weight:600}.status-row i{width:22px;height:6px;border-radius:5px;background:currentColor;opacity:.65}.app-banking{background:#f7f9fb}.bank-head{margin-top:24px}.bank-head span,.bank-head b{display:block}.bank-head span{font-size:.62rem;color:var(--navy-500)}.bank-head b{font-size:.92rem;margin-top:2px}.bank-card{height:135px;margin-top:22px;border-radius:19px;background:linear-gradient(135deg,var(--navy),#2d496e);padding:20px;color:#fff;box-shadow:0 18px 30px rgba(18,33,61,.22)}.bank-card small,.bank-card strong,.bank-card span{display:block}.bank-card small{font-size:.58rem;color:var(--navy-200)}.bank-card strong{font-family:var(--font-display);font-size:1.35rem;margin-top:8px}.bank-card span{font-size:.58rem;margin-top:23px;color:var(--navy-200)}.bank-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.bank-actions span{font-size:.55rem;text-align:center}.bank-actions i{display:block;width:34px;height:34px;border-radius:10px;margin:0 auto 5px;background:var(--teal-wash)}.bank-list>b{font-size:.66rem}.bank-list>div{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--navy-50);font-size:.55rem}.bank-list>div>i{width:25px;height:25px;border-radius:8px;background:var(--navy-50)}.bank-list span{flex:1}.bank-list span,.bank-list small{display:block}.bank-list small{color:var(--navy-500)}
.app-health{background:#f3f7f6}.health-head{display:flex;justify-content:space-between;margin:18px 0 16px}.health-ring{width:150px;height:150px;margin:auto;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(var(--teal) 0 72%,var(--navy-50) 72% 100%);position:relative}.health-ring::before{content:"";position:absolute;inset:13px;border-radius:50%;background:#f3f7f6}.health-ring span,.health-ring small{position:relative;z-index:1;display:block}.health-ring span{font-family:var(--font-display);font-size:1.4rem;font-weight:600}.health-ring small{font-size:.55rem;color:var(--navy-500)}.health-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:21px}.health-stats div{background:#fff;border-radius:12px;padding:12px}.health-stats b,.health-stats small{display:block}.health-stats b{font-size:.67rem}.health-stats small{font-size:.5rem;color:var(--navy-500)}.health-session{display:flex;align-items:center;gap:9px;background:var(--navy);color:#fff;border-radius:13px;padding:12px;margin-top:13px}.health-session>span{width:28px;height:28px;border-radius:50%;background:var(--teal-light)}.health-session div{flex:1}.health-session b,.health-session small{display:block;font-size:.53rem}.health-session small{color:var(--navy-200)}
.app-travel{padding:0;background:#e5e0d8}.app-travel .status-row{position:absolute;z-index:2;top:31px;left:18px;right:18px;color:#fff}.travel-photo{height:370px;padding:65px 20px 26px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(0deg,rgba(9,19,38,.74),transparent 60%),linear-gradient(135deg,#7c9291,#c6b79e);position:relative;overflow:hidden}.travel-photo::before{content:"";position:absolute;width:280px;height:210px;border-radius:50% 50% 0 0;background:#536d6f;left:-35px;bottom:45px;clip-path:polygon(0 80%,35% 25%,53% 55%,75% 12%,100% 82%,100% 100%,0 100%)}.travel-photo span,.travel-photo h4{position:relative;z-index:1}.travel-photo span{font-size:.53rem;color:#fff;letter-spacing:.14em}.travel-photo h4{color:#fff;font-size:1.55rem;margin-top:14px}.travel-panel{height:122px;background:#f4efe8;padding:18px;display:flex;align-items:center}.travel-panel div{flex:1}.travel-panel b,.travel-panel small{display:block}.travel-panel b{font-size:.72rem}.travel-panel small{font-size:.55rem;color:var(--navy-500)}.travel-panel>span{width:34px;height:34px;border-radius:50%;background:var(--signal);color:#fff;display:grid;place-items:center}

/* Motion cards */
.motion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.motion-card{border:1px solid var(--navy-50);border-radius:18px;padding:16px 16px 28px;background:#fff;transform-style:preserve-3d;transition:box-shadow .25s ease,border-color .25s ease}.motion-card:hover{box-shadow:var(--shadow-sm);border-color:var(--navy-200)}.motion-demo{height:245px;border-radius:13px;background:var(--mist);position:relative;overflow:hidden;margin-bottom:24px}.card-index{color:var(--teal);font-size:.7rem;font-weight:650}.motion-card h3{font-size:1.35rem;margin:9px 0 8px}.motion-card p{color:var(--navy-500);font-size:.88rem}.demo-reveal{padding:50px 36px}.reveal-line{display:block;height:11px;border-radius:8px;background:var(--navy-200);margin-bottom:14px;animation:demoReveal 3s cubic-bezier(.2,.8,.2,1) infinite}.reveal-line.line-1{width:76%;background:var(--navy)}.reveal-line.line-2{width:100%;animation-delay:.15s}.reveal-line.line-3{width:64%;animation-delay:.3s}.demo-reveal i{display:block;width:96px;height:38px;border-radius:9px;background:var(--signal);margin-top:26px;animation:demoReveal 3s .45s cubic-bezier(.2,.8,.2,1) infinite}@keyframes demoReveal{0%,15%{opacity:0;transform:translateY(18px)}35%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
.demo-feedback{display:grid;place-content:center;text-align:center}.feedback-button{width:155px;height:48px;border:0;border-radius:10px;background:var(--signal);color:#fff;font-weight:600;position:relative;overflow:hidden;box-shadow:var(--shadow-blue)}.feedback-button span,.feedback-button i{position:absolute;inset:0;display:grid;place-items:center;transition:.3s}.feedback-button i{font-style:normal;font-size:1.1rem;transform:translateY(100%)}.feedback-button.is-done{background:var(--teal)}.feedback-button.is-done span{transform:translateY(-100%)}.feedback-button.is-done i{transform:none}.demo-feedback small{display:block;color:var(--navy-500);font-size:.67rem;margin-top:15px}.demo-depth{perspective:600px}.depth-card{position:absolute;width:180px;height:120px;border-radius:14px;left:50%;top:50%;transform-origin:center;background:#fff;border:1px solid var(--navy-50);box-shadow:0 16px 34px rgba(18,33,61,.12)}.depth-back{transform:translate(-50%,-50%) rotate(-8deg) translate(-20px,-20px);background:var(--teal-wash)}.depth-mid{transform:translate(-50%,-50%) rotate(6deg) translate(18px,-5px);background:var(--navy-50)}.depth-front{transform:translate(-50%,-50%);animation:depthFloat 3.5s ease-in-out infinite}.depth-front span{position:absolute;left:20px;top:22px;width:72px;height:10px;background:var(--navy);border-radius:5px}.depth-front i{position:absolute;width:46px;height:46px;border-radius:50%;background:var(--teal);right:20px;bottom:18px}@keyframes depthFloat{50%{transform:translate(-50%,-56%) rotateX(4deg) rotateY(-5deg)}}

/* Comparison */
.comparison{background:var(--mist)}.comparison-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:center}.comparison-copy h2{font-size:clamp(2.2rem,4vw,3.7rem);margin:19px 0 24px}.comparison-copy>p{font-size:1rem;color:var(--navy-500)}.comparison-copy ul{list-style:none;padding:0;margin:30px 0 0}.comparison-copy li{display:flex;align-items:center;gap:10px;margin:11px 0;color:var(--navy);font-weight:500}.comparison-copy li span{width:22px;height:22px;border-radius:50%;background:var(--teal-wash);color:var(--teal);display:grid;place-items:center;font-size:.65rem}.compare-card{height:520px;border-radius:20px;overflow:hidden;position:relative;box-shadow:var(--shadow-md);border:1px solid var(--navy-200);user-select:none}.compare-base,.compare-overlay{position:absolute;inset:0;overflow:hidden}.compare-overlay{width:100%;clip-path:inset(0 42% 0 0)}.compare-label{position:absolute;z-index:10;top:18px;padding:7px 10px;border-radius:7px;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.before-label{right:18px;background:rgba(255,255,255,.8);color:var(--navy)}.after-label{left:18px;background:var(--navy);color:#fff}.compare-before{background:#ececec}.bad-nav{height:65px;padding:0 24px;background:#fff;display:flex;align-items:center;justify-content:space-between;font-family:Arial,sans-serif;color:#333}.bad-nav span{font-size:.62rem;word-spacing:10px}.bad-layout{padding:82px 60px;text-align:center;font-family:Arial,sans-serif;color:#333}.bad-layout h3{font-family:Arial,sans-serif;color:#333;font-size:2rem;letter-spacing:0}.bad-layout p{font-size:.88rem;margin:15px auto;width:75%}.bad-layout button{background:#777;color:#fff;border:0;padding:10px 18px}.bad-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:60px}.bad-boxes i{height:120px;background:#ddd;border:1px solid #ccc}.compare-after{background:#f5f2ed}.good-nav{height:70px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;color:var(--navy)}.good-nav>span{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.1em}.good-nav>span i{width:20px;height:20px;border:2px solid var(--navy);position:relative}.good-nav>span i::after{content:"";position:absolute;inset:4px;border:2px solid var(--teal)}.good-nav div{display:flex;gap:25px;font-size:.65rem}.good-layout{padding:60px 50px;position:relative;height:450px}.good-layout h3{font-size:3.1rem;max-width:470px;margin:15px 0}.good-layout p{color:var(--navy-500)}.good-layout button{background:var(--signal);color:#fff;border:0;border-radius:8px;padding:11px 15px;margin-top:24px;font-weight:600}.good-art{position:absolute;width:260px;height:260px;right:-70px;bottom:-30px}.good-art i{position:absolute;border:1px solid var(--navy);border-radius:50%}.good-art i:first-child{inset:0}.good-art i:nth-child(2){inset:50px;border-color:var(--teal)}.good-art span{position:absolute;width:70px;height:70px;border-radius:50%;background:var(--navy);left:95px;top:95px}.compare-handle{position:absolute;z-index:12;top:0;bottom:0;left:58%;width:2px;background:#fff;transform:translateX(-1px)}.compare-handle span{position:absolute;width:42px;height:42px;border-radius:50%;background:var(--signal);color:#fff;display:grid;place-items:center;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 9px 24px rgba(47,111,237,.3);cursor:ew-resize}

/* Lab */
.lab-section{background:var(--navy);color:#fff}.lab-heading{max-width:720px;margin-bottom:50px}.lab-heading h2{color:#fff;font-size:clamp(2.4rem,4vw,3.7rem);margin:18px 0}.lab-heading p{color:var(--navy-200);font-size:1rem}.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.lab-card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:28px}.lab-title{display:flex;align-items:center;gap:12px}.lab-title span{color:var(--teal-light);font-size:.68rem}.lab-title h3{color:#fff;font-size:1.22rem}.lab-card>p{color:var(--navy-200);font-size:.8rem;margin:10px 0 25px;min-height:50px}.switch-row{display:flex;align-items:center;gap:12px;padding:16px 0;border-top:1px solid rgba(255,255,255,.1);cursor:pointer}.switch-row>span{flex:1}.switch-row b,.switch-row small{display:block}.switch-row b{font-size:.76rem}.switch-row small{font-size:.63rem;color:var(--navy-200)}.switch-row input{position:absolute;opacity:0}.switch-row>i{width:44px;height:24px;border-radius:20px;background:rgba(255,255,255,.18);position:relative;transition:.2s}.switch-row>i::after{content:"";position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;left:3px;top:3px;transition:.2s}.switch-row input:checked+i{background:var(--signal)}.switch-row input:checked+i::after{transform:translateX(20px)}.progress-demo{padding-top:3px}.progress-meta{display:flex;justify-content:space-between;font-size:.68rem}.progress-meta strong{color:var(--teal-light)}.progress-track{height:9px;border-radius:9px;background:rgba(255,255,255,.12);margin:14px 0 24px;overflow:hidden}.progress-track i{display:block;width:0;height:100%;background:var(--teal-light);border-radius:9px;transition:width .12s linear}.progress-button{width:100%;box-shadow:none;min-height:46px}.accordion-demo{border-top:1px solid rgba(255,255,255,.1)}.accordion-demo button{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;color:#fff;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.76rem}.accordion-demo button i{font-style:normal;color:var(--signal);font-size:1rem}.accordion-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}.accordion-panel>p{overflow:hidden;color:var(--navy-200);font-size:.7rem}.accordion-panel.is-open{grid-template-rows:1fr}.accordion-panel.is-open>p{padding:12px 0 16px}

/* Services */
.service-list{border-top:1px solid var(--navy-200)}.service-list a{display:grid;grid-template-columns:52px 1.05fr 1fr 38px;gap:24px;align-items:center;padding:27px 10px;border-bottom:1px solid var(--navy-200);transition:background .2s ease,padding .2s ease}.service-list a:hover{background:var(--mist);padding-left:20px;padding-right:20px}.service-list span{color:var(--teal);font-size:.7rem}.service-list h3{font-size:1.3rem}.service-list p{color:var(--navy-500);font-size:.85rem}.service-list i{font-style:normal;color:var(--signal);font-size:1.1rem;transition:transform .2s}.service-list a:hover i{transform:translate(3px,-3px)}

/* Process */
.process-section{background:var(--navy-deep);color:#fff}.process-intro{max-width:760px}.process-intro h2{color:#fff;font-size:clamp(2.3rem,4vw,3.8rem);margin-top:20px}.process-track{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:62px;border-top:1px solid rgba(255,255,255,.15)}.process-track article{padding:30px 28px 0 0;position:relative}.process-track article+article{border-left:1px solid rgba(255,255,255,.15);padding-left:28px}.process-track article::before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--teal-light);top:-4px;left:0}.process-track article+article::before{left:28px}.process-track span{font-size:.68rem;color:var(--teal-light)}.process-track h3{color:#fff;font-size:1.2rem;margin:13px 0 10px}.process-track p{color:var(--navy-200);font-size:.8rem}

/* CTA */
.cta-section{background:var(--mist)}.cta-card{min-height:430px;border-radius:24px;background:var(--navy);padding:70px;display:grid;grid-template-columns:1.4fr .6fr;gap:60px;align-items:end;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}.cta-card>div:not(.cta-grid-art){position:relative;z-index:2}.cta-card h2{color:#fff;font-size:clamp(2.2rem,4vw,3.7rem);margin:19px 0 22px;max-width:810px}.cta-card p{color:var(--navy-200);max-width:650px}.cta-actions{display:flex;flex-direction:column;align-items:flex-start;gap:20px}.cta-grid-art{position:absolute;right:-120px;top:-120px;width:520px;height:520px;opacity:.36}.cta-grid-art i{position:absolute;border:1px solid var(--teal-light);border-radius:50%}.cta-grid-art i:nth-child(1){inset:0}.cta-grid-art i:nth-child(2){inset:70px}.cta-grid-art i:nth-child(3){inset:140px}.cta-grid-art i:nth-child(4){inset:210px}.cta-grid-art span{position:absolute;width:60px;height:60px;border-radius:50%;background:var(--teal-light);left:230px;top:230px}

/* Page toast */
.toast{position:fixed;z-index:500;right:24px;bottom:24px;background:#fff;color:var(--navy);padding:15px 18px;border-radius:14px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:12px;transform:translateY(120px);opacity:0;transition:.35s}.toast.is-visible{transform:none;opacity:1}.toast>i{font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--teal-wash);color:var(--teal);display:grid;place-items:center}.toast b,.toast span{display:block}.toast b{font-size:.76rem}.toast span{font-size:.65rem;color:var(--navy-500)}

@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:30px}.hero-copy{max-width:780px}.hero-canvas{max-width:700px;width:100%;margin-inline:auto}.hero{padding-top:80px}.section-heading{gap:50px}.mobile-grid{grid-template-columns:1fr}.mobile-copy{max-width:720px}.phone-gallery{margin-top:20px}.comparison-grid{grid-template-columns:1fr}.comparison-copy{max-width:750px}.cta-card{grid-template-columns:1fr}.cta-actions{flex-direction:row;align-items:center}
}
@media (max-width:900px){
  .hero{min-height:auto}.hero h1{font-size:clamp(3rem,9vw,4.6rem)}.section-pad{padding:90px 0}.section-heading{grid-template-columns:1fr;margin-bottom:44px}.experience-stage{min-height:550px}.view-brand{grid-template-columns:130px 1fr}.brand-main{grid-template-columns:1fr}.brand-statement{display:none}.commerce-grid{grid-template-columns:1fr 1fr}.product-copy{display:none}.motion-grid,.lab-grid{grid-template-columns:1fr 1fr}.motion-grid article:last-child,.lab-grid article:last-child{grid-column:1/-1}.service-list a{grid-template-columns:42px 1fr 32px}.service-list p{display:none}.process-track{grid-template-columns:1fr 1fr;row-gap:35px}.process-track article:nth-child(3){border-left:0;padding-left:0}.process-track article:nth-child(3)::before{left:0}.cta-card{padding:54px 42px}
}
@media (max-width:650px){
  .shell{width:min(100% - 30px,var(--max))}.section-pad{padding:74px 0}.hero{padding-top:58px;padding-bottom:90px}.hero h1{font-size:2.9rem}.hero-lede{font-size:1rem}.hero-actions{display:grid}.hero-actions .button{width:100%}.hero-proof{grid-template-columns:1fr}.hero-proof>div{padding:14px 0}.hero-proof>div+div{border-left:0;border-top:1px solid var(--navy-200);padding-left:0}.hero-canvas{height:520px;margin-top:10px}.browser-card{width:470px;height:335px;left:-90px;top:70px;transform:scale(.82)}.phone-shell{width:160px;height:330px}.phone-front{right:-4px;bottom:15px}.phone-back{right:80px;top:2px}.floating-pill{display:none}.scroll-cue{display:none}.section-heading h2,.mobile-copy h2,.comparison-copy h2,.lab-heading h2,.process-intro h2,.cta-card h2{font-size:2.35rem}.experience-tabs{grid-template-columns:1fr}.experience-tab{justify-content:flex-start}.experience-stage{margin:12px;min-height:500px}.stage-view{inset:46px 0 0}.view-brand{grid-template-columns:1fr}.brand-sidebar{display:none}.brand-main{grid-template-columns:1fr}.brand-object{width:190px;height:270px}.commerce-grid{grid-template-columns:1fr}.product-b{display:none}.view-commerce{padding:18px}.view-dashboard{grid-template-columns:44px 1fr}.dash-side{padding:16px 8px}.dash-side b{width:18px}.dash-main{padding:22px 14px}.dash-head .dash-search{display:none}.dash-metrics{grid-template-columns:1fr 1fr}.dash-metrics article:last-child{display:none}.dash-grid{grid-template-columns:1fr}.dash-activity{display:none}.mobile-grid{gap:20px}.phone-gallery{height:520px}.device{width:205px;height:430px}.gallery-phone.phone-left,.gallery-phone.phone-right{opacity:.22}.mobile-feature-list small{line-height:1.5}.motion-grid,.lab-grid{grid-template-columns:1fr}.motion-grid article:last-child,.lab-grid article:last-child{grid-column:auto}.compare-card{height:410px}.bad-layout{padding:75px 24px}.bad-layout h3{font-size:1.5rem}.good-layout{padding:70px 26px}.good-layout h3{font-size:2.15rem}.good-art{opacity:.55}.service-list a{grid-template-columns:32px 1fr 24px;padding:22px 4px;gap:12px}.service-list h3{font-size:1.05rem}.process-track{grid-template-columns:1fr}.process-track article+article{border-left:0;padding-left:0}.process-track article+article::before{left:0}.cta-card{padding:42px 26px}.cta-actions{flex-direction:column;align-items:flex-start}.toast{left:15px;right:15px;bottom:15px}
}
@media (prefers-reduced-motion:reduce){
  .lf-web-design-page *,.lf-web-design-page *::before,.lf-web-design-page *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.marquee-track{animation:none}.orbit{display:none}
}

/* ========================================================================== 
   V2 — Extended interaction system
   ========================================================================== */
.page-progress{position:fixed;inset:0 0 auto;z-index:1000;height:3px;pointer-events:none;background:transparent}
.page-progress i{display:block;width:100%;height:100%;background:var(--signal);transform:scaleX(0);transform-origin:left center;will-change:transform;box-shadow:0 0 16px rgba(47,111,237,.4)}

/* Showcase auto-play controls */
.stage-tools{display:flex;align-items:center;gap:7px}
.stage-autoplay,.stage-refresh{display:grid;place-items:center;border:1px solid var(--navy-200);width:30px;height:30px;border-radius:8px;background:#fff;color:var(--signal);font-weight:700;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.stage-autoplay:hover,.stage-refresh:hover{background:var(--signal);color:#fff;border-color:var(--signal);transform:translateY(-1px)}
.stage-autoplay .play-icon{display:none;font-size:.58rem;margin-left:1px}.stage-autoplay:not(.is-playing) .play-icon{display:block}.stage-autoplay:not(.is-playing) .pause-icon{display:none}.stage-autoplay .pause-icon{font-size:.63rem;letter-spacing:-.12em}
.stage-cycle-progress{position:absolute;z-index:8;top:45px;left:0;right:0;height:2px;background:rgba(18,33,61,.05)}
.stage-cycle-progress i{display:block;height:100%;width:100%;background:var(--signal);transform-origin:left center;transform:scaleX(0)}
.experience-shell.is-cycling .stage-cycle-progress i{animation:stageCycle 5.2s linear forwards}
@keyframes stageCycle{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Mobile carousel caption */
.phone-caption{display:flex;align-items:flex-start;gap:14px;margin-top:24px;max-width:430px;min-height:58px}
.phone-caption>span{font-family:var(--font-display);font-size:.72rem;color:var(--teal-light);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:4px 9px}
.phone-caption strong,.phone-caption small{display:block}.phone-caption strong{color:#fff;font-family:var(--font-display);font-size:.92rem}.phone-caption small{color:var(--navy-200);font-size:.72rem;line-height:1.55;margin-top:2px}
.phone-caption.is-changing div{animation:captionIn .35s ease}
@keyframes captionIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.phone-gallery{touch-action:pan-y;cursor:grab}.phone-gallery.is-dragging{cursor:grabbing}

/* Expanded motion gallery */
.motion-grid-expanded{grid-template-columns:repeat(3,1fr);row-gap:24px}
.motion-card{position:relative;isolation:isolate;overflow:hidden}
.motion-card::after{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at var(--card-x,50%) var(--card-y,50%),rgba(95,199,207,.12),transparent 42%);opacity:0;transition:opacity .25s ease;z-index:-1}
.motion-card:hover::after{opacity:1}
.demo-spotlight{background:var(--navy-deep);cursor:crosshair;--spot-x:50%;--spot-y:50%}
.demo-spotlight::before{content:"";position:absolute;inset:0;background:radial-gradient(125px circle at var(--spot-x) var(--spot-y),rgba(95,199,207,.32),transparent 65%);pointer-events:none}
.spotlight-grid{position:absolute;inset:25px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.spotlight-grid i{border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.035);transition:transform .25s ease,border-color .25s ease,background .25s ease}.demo-spotlight:hover .spotlight-grid i{border-color:rgba(95,199,207,.25)}
.spotlight-pointer{position:absolute;left:var(--spot-x);top:var(--spot-y);transform:translate(-50%,-50%);width:22px;height:22px;border:1px solid rgba(255,255,255,.7);border-radius:50%;pointer-events:none;transition:opacity .2s ease}.spotlight-pointer span{position:absolute;width:4px;height:4px;background:#fff;border-radius:50%;left:8px;top:8px;box-shadow:0 0 0 7px rgba(255,255,255,.08)}.demo-spotlight small{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:var(--navy-200);font-size:.65rem}
.demo-kinetic{background:linear-gradient(145deg,var(--navy),var(--navy-deep));color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:34px}.kinetic-prefix{font-size:.72rem;color:var(--navy-200);letter-spacing:.04em}.demo-kinetic strong{font-family:var(--font-display);font-size:2.3rem;line-height:1;color:var(--teal-light);margin:9px 0 30px;letter-spacing:-.055em}.demo-kinetic strong.is-changing{animation:kineticSwap .48s cubic-bezier(.2,.8,.2,1)}
@keyframes kineticSwap{0%{opacity:1;transform:none;filter:blur(0)}45%{opacity:0;transform:translateY(-15px);filter:blur(5px)}46%{transform:translateY(16px)}100%{opacity:1;transform:none;filter:blur(0)}}
.kinetic-button{border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(255,255,255,.05);color:#fff;padding:8px 11px;font-size:.64rem;font-weight:600;transition:.2s}.kinetic-button:hover{background:var(--signal);border-color:var(--signal)}
.demo-sort{padding:34px 28px;background:linear-gradient(180deg,#f8fafc,#edf1f6)}.demo-sort>small{display:block;color:var(--navy-500);font-size:.64rem;margin-bottom:12px}.sort-item{height:47px;background:#fff;border:1px solid var(--navy-50);border-radius:10px;display:flex;align-items:center;gap:11px;padding:0 13px;margin:8px 0;box-shadow:0 7px 18px rgba(18,33,61,.06);cursor:grab;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}.sort-item:hover{transform:translateX(3px);box-shadow:0 12px 24px rgba(18,33,61,.1)}.sort-item.is-dragging{opacity:.45;transform:scale(.98)}.sort-item.is-over{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,124,134,.1)}.sort-item i{width:13px;height:16px;background:radial-gradient(circle,var(--navy-500) 1px,transparent 1.5px);background-size:5px 5px}.sort-item span{flex:1;color:var(--navy);font-size:.68rem;font-weight:600}.sort-item b{font-size:.6rem;color:var(--navy-500)}

/* Live motion playground */
.playground-section{background:var(--navy-deep);color:#fff;overflow:hidden;position:relative}
.playground-section::before{content:"";position:absolute;width:900px;height:900px;border:1px solid rgba(95,199,207,.09);border-radius:50%;left:-460px;top:-420px;box-shadow:0 0 0 120px rgba(95,199,207,.025),0 0 0 240px rgba(95,199,207,.018)}
.playground-section .section-heading{position:relative}.playground-section .section-heading h2{color:#fff}.playground-section .section-heading p{color:var(--navy-200)}
.playground-shell{position:relative;display:grid;grid-template-columns:310px minmax(0,1fr);min-height:650px;border:1px solid rgba(255,255,255,.13);border-radius:24px;overflow:hidden;background:rgba(255,255,255,.025);box-shadow:0 38px 100px rgba(0,0,0,.3)}
.playground-controls{padding:32px 28px;border-right:1px solid rgba(255,255,255,.12);background:rgba(9,19,38,.78);backdrop-filter:blur(18px);position:relative;z-index:4}
.control-group,.range-control,.play-switch{display:block;padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid rgba(255,255,255,.1)}
.control-label,.range-control>span{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:.72rem;font-weight:600;margin-bottom:13px}.range-control output{color:var(--teal-light);font-weight:500;font-size:.68rem}
.preset-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.preset-buttons button{border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.045);color:var(--navy-200);padding:8px 5px;font-size:.62rem;transition:.2s}.preset-buttons button:hover{border-color:rgba(255,255,255,.3);color:#fff}.preset-buttons button.is-active{background:var(--signal);border-color:var(--signal);color:#fff}
.range-control input{width:100%;height:4px;appearance:none;background:rgba(255,255,255,.14);border-radius:99px;outline:0}.range-control input::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:5px solid var(--signal);box-shadow:0 3px 10px rgba(0,0,0,.25)}.range-control input::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#fff;border:5px solid var(--signal)}
.play-switch{display:flex;align-items:center;gap:12px;cursor:pointer}.play-switch>span{flex:1}.play-switch b,.play-switch small{display:block}.play-switch b{font-size:.72rem;color:#fff}.play-switch small{font-size:.61rem;color:var(--navy-200);margin-top:2px}.play-switch input{position:absolute;opacity:0}.play-switch>i{width:42px;height:23px;border-radius:99px;background:rgba(255,255,255,.16);position:relative;transition:.2s}.play-switch>i::after{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}.play-switch input:checked+i{background:var(--signal)}.play-switch input:checked+i::after{transform:translateX(19px)}
.playground-replay{width:100%;box-shadow:none;margin-top:2px}.playground-replay span{font-size:1rem;transition:transform .3s ease}.playground-replay:hover span{transform:rotate(180deg)}
.playground-canvas{--play-speed:1;--play-depth:.52;--play-glow:.44;position:relative;min-width:0;overflow:hidden;background:radial-gradient(circle at 65% 35%,rgba(14,124,134,.14),transparent 34%),linear-gradient(145deg,#101f39,#07101f);perspective:1100px;outline:0;--mx:62%;--my:42%}
.play-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(circle at 60% 45%,black,transparent 78%)}
.play-glow{position:absolute;width:540px;height:540px;left:var(--mx);top:var(--my);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(95,199,207,calc(var(--play-glow) * .45)),rgba(47,111,237,calc(var(--play-glow) * .11)) 38%,transparent 70%);filter:blur(2px);transition:left .15s linear,top .15s linear,opacity .3s ease}.playground-canvas:not(.is-pointer) .play-glow{left:65%;top:36%}
.play-orbit{position:absolute;border:1px solid rgba(95,199,207,.24);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);animation:playOrbit calc(26s / var(--play-speed)) linear infinite}.play-orbit i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--teal-light);box-shadow:0 0 0 9px rgba(95,199,207,.09)}.orbit-a{width:560px;height:560px}.orbit-a i{right:82px;top:46px}.orbit-b{width:410px;height:410px;animation-direction:reverse;animation-duration:calc(19s / var(--play-speed))}.orbit-b i{left:47px;bottom:72px;background:#fff}.playground-canvas:not(.is-auto) .play-orbit{animation-play-state:paused}
@keyframes playOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
.play-card{position:absolute;border:1px solid rgba(255,255,255,.16);border-radius:20px;box-shadow:0 40px 85px rgba(0,0,0,.28);will-change:transform;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.play-card-back{width:430px;height:310px;left:50%;top:50%;background:rgba(95,199,207,.1);transform:translate(calc(-50% - (42px * var(--play-depth))),calc(-50% - (48px * var(--play-depth)))) rotate(-7deg)}.play-card-back span{position:absolute;height:7px;border-radius:10px;background:rgba(255,255,255,.14);left:30px;right:90px;top:35px}.play-card-back span+span{top:58px;right:150px}
.play-card-mid{width:440px;height:320px;left:50%;top:50%;background:rgba(255,255,255,.055);backdrop-filter:blur(6px);transform:translate(calc(-50% + (44px * var(--play-depth))),calc(-50% - (8px * var(--play-depth)))) rotate(5deg)}.play-card-mid span{position:absolute;width:78px;height:78px;border-radius:18px;background:rgba(255,255,255,.07);left:32px;bottom:34px}.play-card-mid span:nth-child(2){left:125px}.play-card-mid span:nth-child(3){left:218px}
.play-card-main{width:min(480px,72%);min-height:350px;left:50%;top:50%;padding:32px;background:rgba(18,33,61,.82);backdrop-filter:blur(18px);transform:translate(-50%,-50%);display:flex;flex-direction:column}.play-card-head{display:flex;align-items:center;justify-content:space-between;font-size:.59rem;letter-spacing:.12em;color:var(--navy-200)}.play-card-head span{display:flex;align-items:center;gap:8px}.play-card-head i{width:14px;height:14px;border:1px solid #fff;position:relative}.play-card-head i::after{content:"";position:absolute;inset:3px;border:1px solid var(--teal-light)}.play-card-head b{font-weight:500}.play-card-copy{margin:auto 0}.play-card-copy small{color:var(--teal-light);font-size:.57rem;letter-spacing:.14em}.play-card-copy h3{font-size:clamp(2rem,3.2vw,3.25rem);color:#fff;margin:18px 0 14px;max-width:520px}.play-card-copy p{font-size:.79rem;color:var(--navy-200);max-width:48ch}.play-card-actions{display:flex;gap:8px}.play-card-actions button{height:39px;border-radius:8px;font-size:.65rem;font-weight:600}.play-demo-primary{border:0;background:var(--signal);color:#fff;padding:0 15px}.play-demo-icon{width:39px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff}.play-demo-primary:hover,.play-demo-icon:hover{transform:translateY(-2px)}
.play-status{position:absolute;background:rgba(255,255,255,.94);color:var(--navy);padding:10px 13px;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.2);font-size:.62rem;font-weight:600;display:flex;align-items:center;gap:8px;animation:statusFloat calc(4s / var(--play-speed)) ease-in-out infinite}.play-status i{width:7px;height:7px;border-radius:50%;background:var(--teal)}.status-one{right:7%;top:14%}.status-two{left:7%;bottom:14%;animation-delay:-2s}.status-two i{background:var(--signal)}
@keyframes statusFloat{50%{transform:translateY(-8px)}}
.play-cursor{position:absolute;left:var(--mx);top:var(--my);transform:translate(-50%,-50%);width:34px;height:34px;border:1px solid rgba(255,255,255,.7);border-radius:50%;pointer-events:none;transition:left .12s linear,top .12s linear,opacity .2s}.play-cursor span{position:absolute;width:5px;height:5px;background:#fff;border-radius:50%;left:14px;top:14px}.playground-canvas:not(.is-pointer) .play-cursor{opacity:0}.playground-hint{position:absolute;right:18px;bottom:16px;color:rgba(255,255,255,.45);font-size:.56rem;letter-spacing:.06em}
.playground-canvas.is-replaying .play-card-main{animation:playCardReplay calc(1.15s / var(--play-speed)) cubic-bezier(.2,.8,.2,1)}.playground-canvas.is-replaying .play-card-back{animation:playBackReplay calc(1.15s / var(--play-speed)) cubic-bezier(.2,.8,.2,1)}.playground-canvas.is-replaying .play-card-mid{animation:playMidReplay calc(1.15s / var(--play-speed)) cubic-bezier(.2,.8,.2,1)}
@keyframes playCardReplay{0%{opacity:0;transform:translate(-50%,calc(-50% + 42px)) scale(.94)}65%{opacity:1;transform:translate(-50%,calc(-50% - 5px)) scale(1.01)}100%{transform:translate(-50%,-50%)}}
@keyframes playBackReplay{0%{opacity:0;transform:translate(calc(-50% - 70px),calc(-50% - 80px)) rotate(-13deg)}100%{opacity:1;transform:translate(calc(-50% - (42px * var(--play-depth))),calc(-50% - (48px * var(--play-depth)))) rotate(-7deg)}}
@keyframes playMidReplay{0%{opacity:0;transform:translate(calc(-50% + 80px),calc(-50% + 25px)) rotate(12deg)}100%{opacity:1;transform:translate(calc(-50% + (44px * var(--play-depth))),calc(-50% - (8px * var(--play-depth)))) rotate(5deg)}}

/* Expanded micro-interaction lab */
.lab-grid{grid-template-columns:repeat(3,1fr)}
.lab-card{min-height:330px;transition:transform .25s ease,border-color .25s ease,background .25s ease}.lab-card:hover{transform:translateY(-4px);border-color:rgba(95,199,207,.28);background:rgba(255,255,255,.072)}
.theme-segments{display:grid;grid-template-columns:1fr 1fr;background:rgba(255,255,255,.08);border-radius:9px;padding:4px;margin-bottom:14px}.theme-segments button{border:0;background:transparent;color:var(--navy-200);font-size:.65rem;border-radius:6px;padding:7px}.theme-segments button.is-active{background:var(--signal);color:#fff}.theme-preview{height:128px;border-radius:12px;background:#fff;color:var(--navy);padding:14px;transition:background .3s ease,color .3s ease,transform .3s ease}.theme-demo[data-theme="dark"] .theme-preview{background:#091326;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.theme-preview-head{display:flex;align-items:center;gap:8px}.theme-preview-head i{width:17px;height:17px;border:2px solid currentColor;position:relative}.theme-preview-head i::after{content:"";position:absolute;inset:3px;border:2px solid var(--teal)}.theme-preview-head span{width:58px;height:6px;background:currentColor;border-radius:9px;opacity:.75}.theme-preview-body{position:relative;margin-top:16px}.theme-preview-body b,.theme-preview-body span{display:block;border-radius:7px;background:currentColor;opacity:.12}.theme-preview-body b{width:72%;height:8px}.theme-preview-body span{height:5px;margin-top:7px;width:90%}.theme-preview-body span+span{width:62%}.theme-preview-body button{position:absolute;right:0;top:12px;border:0;background:var(--signal);color:#fff;border-radius:6px;padding:6px 9px;font-size:.55rem}
.command-demo label{height:42px;border:1px solid rgba(255,255,255,.13);border-radius:9px;display:flex;align-items:center;padding:0 10px;gap:8px;background:rgba(255,255,255,.04)}.command-demo label span{color:var(--teal-light)}.command-input{min-width:0;flex:1;border:0;background:transparent;color:#fff;outline:0;font-size:.68rem}.command-input::placeholder{color:var(--navy-200)}kbd{font-family:var(--font-body);font-size:.55rem;font-weight:500}.command-demo label kbd,.command-list kbd{border:1px solid rgba(255,255,255,.14);border-radius:5px;padding:2px 5px;color:var(--navy-200)}.command-list{margin-top:8px}.command-list button{display:flex;align-items:center;gap:9px;width:100%;height:39px;border:0;border-radius:8px;background:transparent;color:#fff;padding:0 9px;font-size:.65rem;text-align:left}.command-list button:hover,.command-list button.is-active{background:rgba(255,255,255,.08)}.command-list button[hidden]{display:none}.command-list button i{font-style:normal;color:var(--teal-light);width:18px}.command-list button span{flex:1}.command-empty{color:var(--navy-200);font-size:.64rem;padding:18px 8px;text-align:center}
.hold-demo{padding-top:3px}.hold-status{display:flex;justify-content:space-between;font-size:.68rem;margin-bottom:18px}.hold-status b{color:var(--teal-light)}.hold-button{position:relative;width:100%;height:48px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(255,255,255,.055);color:#fff;overflow:hidden;font-size:.67rem;font-weight:600}.hold-button>i{position:absolute;inset:0 auto 0 0;width:0;background:var(--signal);transition:width .08s linear}.hold-button>span,.hold-button>b{position:relative;z-index:1}.hold-button>b{display:none}.hold-button.is-holding>i{width:100%;transition:width 1.2s linear}.hold-button.is-done{background:var(--teal);border-color:var(--teal)}.hold-button.is-done span{display:none}.hold-button.is-done b{display:inline}.hold-demo>small{display:block;text-align:center;color:var(--navy-200);font-size:.59rem;margin-top:10px}

/* Service sheen and process progress */
.service-list a{position:relative;overflow:hidden;--sheen-x:50%;isolation:isolate}.service-list a::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--sheen-x) 50%,rgba(95,199,207,.13),transparent 62%);opacity:0;transition:opacity .25s ease;z-index:-1}.service-list a:hover::before{opacity:1}
.process-track{position:relative}.process-progress{position:absolute;left:0;right:0;top:-1px;height:2px;background:rgba(255,255,255,.04);pointer-events:none}.process-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--teal-light),rgba(95,199,207,.2));transform:scaleX(0);transform-origin:left center}.process-track article{transition:opacity .35s ease,transform .35s ease}.process-track article:not(.is-process-active){opacity:.56}.process-track article.is-process-active{transform:translateY(-4px)}.process-track article.is-process-active::before{box-shadow:0 0 0 8px rgba(95,199,207,.11)}

/* CTA cursor illumination */
.cta-card{--cta-x:75%;--cta-y:35%}.cta-card::after{content:"";position:absolute;inset:0;background:radial-gradient(430px circle at var(--cta-x) var(--cta-y),rgba(95,199,207,.15),transparent 68%);pointer-events:none}

@media (max-width:1000px){
  .motion-grid-expanded{grid-template-columns:1fr 1fr}
  .playground-shell{grid-template-columns:270px 1fr}.playground-controls{padding:27px 22px}.play-card-main{width:76%;padding:26px}.play-card-copy h3{font-size:2.25rem}.play-status{display:none}
}
@media (max-width:900px){
  .playground-shell{grid-template-columns:1fr}.playground-controls{border-right:0;border-bottom:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.control-group{grid-column:1/-1}.playground-replay{align-self:end;margin-bottom:24px}.playground-canvas{min-height:590px}.play-card-main{width:min(500px,78%)}
}
@media (max-width:650px){
  .motion-grid-expanded{grid-template-columns:1fr}.motion-demo{height:225px}
  .playground-shell{min-height:0}.playground-controls{display:block}.playground-canvas{min-height:520px}.play-card-main{width:82%;min-height:320px;padding:24px}.play-card-copy h3{font-size:2rem}.play-card-back,.play-card-mid{width:76%;height:300px}.playground-hint{display:none}.orbit-a{width:460px;height:460px}.orbit-b{width:350px;height:350px}
  .phone-caption{margin-top:18px}.lab-card{min-height:0}
  .process-progress{left:3px;right:auto;top:0;bottom:0;width:2px;height:auto}.process-progress i{width:100%;height:100%;transform:scaleY(0);transform-origin:center top}
}
@media (prefers-reduced-motion:reduce){
  .page-progress i,.stage-cycle-progress i{animation:none!important}
  .play-orbit,.play-status,.playground-canvas.is-replaying .play-card,.demo-kinetic strong,.phone-caption div{animation:none!important}
  .play-cursor,.spotlight-pointer{display:none}
}
section[id]{scroll-margin-top:110px}
.lf-web-design-page{overflow-x:clip}

/* ========================================================================== 
   v3.8 — product-specific showcase visuals and wider section rhythm
   ========================================================================== */
.lf-web-design-page .section-pad{padding:128px 0}
.lf-web-design-page .showcase.section-pad,
.lf-web-design-page .mobile-section.section-pad,
.lf-web-design-page .playground-section.section-pad,
.lf-web-design-page .services-section.section-pad{padding-top:140px;padding-bottom:140px}

/* Replace generic abstract artwork with LogicalFrame product proof. */
.galaxy-product-view{background:linear-gradient(145deg,#12213D,#1A3158)!important}
.galaxy-widget-board{position:absolute;inset:54px 42px 54px 42px;display:grid;grid-template-columns:1fr 1fr;gap:14px;z-index:2}
.galaxy-widget-board article{display:flex;flex-direction:column;justify-content:flex-end;padding:22px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.06);backdrop-filter:blur(6px);transition:transform .25s ease,background .25s ease,border-color .25s ease}
.galaxy-widget-board article:hover{transform:translateY(-4px);background:rgba(255,255,255,.1);border-color:rgba(95,199,207,.42)}
.galaxy-widget-board span{font-family:var(--font-display);font-size:2rem;font-weight:650;color:#fff;line-height:1}
.galaxy-widget-board small{margin-top:9px;color:var(--navy-200);font-size:.62rem;line-height:1.4}
.galaxy-frame-mark{position:absolute;right:30px;top:28px;width:64px;height:64px;border:4px solid rgba(255,255,255,.92);z-index:3}
.galaxy-frame-mark i{position:absolute;inset:15px;border:4px solid var(--teal-light)}
.galaxy-product-view .brand-index{color:rgba(255,255,255,.08)}

.avawrite-grid .product-tile{background:#F3EEE7}
.avawrite-grid .product-b{background:#E5ECF2}
.book-cover{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%) rotate(-3deg);width:150px;height:226px;padding:22px 17px;display:flex;flex-direction:column;justify-content:space-between;border-radius:4px 12px 12px 4px;box-shadow:0 24px 42px rgba(18,33,61,.22);color:#fff;overflow:hidden}
.book-cover::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.28)}
.book-cover-a{background:linear-gradient(160deg,#17345E,#0B162B)}
.book-cover-b{background:linear-gradient(160deg,#0E7C86,#07545B);transform:translate(-50%,-50%) rotate(3deg)}
.book-cover i{font-style:normal;font-size:.68rem;letter-spacing:.18em;color:var(--teal-light)}
.book-cover strong{font-family:var(--font-display);font-size:1.2rem;line-height:1.05;max-width:8ch}
.book-cover small{font-size:.5rem;letter-spacing:.2em;color:rgba(255,255,255,.72)}

/* The SaaS panel now depicts Interweb Connect rather than a generic dashboard. */
.view-dashboard .dash-logo{border-radius:7px}
.view-dashboard .dash-metrics article:nth-child(2) strong{font-size:1.2rem;margin-top:12px}
.view-dashboard .dash-activity i{position:relative;background:var(--teal-wash)}
.view-dashboard .dash-activity i::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--teal);right:-2px;top:-2px;border:2px solid #fff}

@media (max-width:900px){
  .lf-web-design-page .section-pad{padding:104px 0}
  .lf-web-design-page .showcase.section-pad,
  .lf-web-design-page .mobile-section.section-pad,
  .lf-web-design-page .playground-section.section-pad,
  .lf-web-design-page .services-section.section-pad{padding-top:112px;padding-bottom:112px}
}
@media (max-width:620px){
  .lf-web-design-page .section-pad{padding:82px 0}
  .lf-web-design-page .showcase.section-pad,
  .lf-web-design-page .mobile-section.section-pad,
  .lf-web-design-page .playground-section.section-pad,
  .lf-web-design-page .services-section.section-pad{padding-top:92px;padding-bottom:92px}
  .galaxy-widget-board{inset:34px 22px;gap:9px}
  .galaxy-widget-board article{padding:14px}
  .galaxy-widget-board span{font-size:1.35rem}
  .galaxy-frame-mark{width:48px;height:48px;right:18px;top:18px}
  .galaxy-frame-mark i{inset:11px;border-width:3px}
  .book-cover{width:132px;height:198px}
}

/* v4.6.3 accessible muted-copy role */
.lf-web-design-page{--navy-500:#5B6B86}