/* ===== Brand font — drop licensed Glacial Indifference in /fonts and uncomment ===== @font-face{
    font-family:"Glacial Indifference";
    src:url("/fonts/GlacialIndifference-Regular.woff2") format("woff2");
    font-weight:400;
    font-display:swap
}
 @font-face{
    font-family:"Glacial Indifference";
    src:url("/fonts/GlacialIndifference-Bold.woff2") format("woff2");
    font-weight:700;
    font-display:swap
}
 */
 @font-face {
    font-family: 'Glacial Indifference';
    src: url('./fonts/GlacialIndifference-Bold.eot');
    src: url('./fonts/GlacialIndifference-Bold.eot?#iefix') format('embedded-opentype'),
        url('./fonts/GlacialIndifference-Bold.woff2') format('woff2'),
        url('./fonts/GlacialIndifference-Bold.woff') format('woff'),
        url('./fonts/GlacialIndifference-Bold.ttf') format('truetype'),
        url('./fonts/GlacialIndifference-Bold.svg#GlacialIndifference-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Glacial Indifference';
    src: url('./fonts/GlacialIndifference-Regular.eot');
    src: url('./fonts/GlacialIndifference-Regular.eot?#iefix') format('embedded-opentype'),
        url('./fonts/GlacialIndifference-Regular.woff2') format('woff2'),
        url('./fonts/GlacialIndifference-Regular.woff') format('woff'),
        url('./fonts/GlacialIndifference-Regular.ttf') format('truetype'),
        url('./fonts/GlacialIndifference-Regular.svg#GlacialIndifference-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
 :root{
     --white:#ffffff;
    --paper:#f7f8fa;
    --stone:#f0ede8;
     --ink:#0e1116;
    --ink-soft:#161a20;
    --ink-70:rgba(14,17,22,.7);
    --ink-50:rgba(14,17,22,.5);
     --blue:#006b99;
    --blue-deep:#005579;
    --blue-tint:#e6f1f6;
     --olive:#5b742c;
    --olive-deep:#4c6124;
    --olive-tint:#eef2e5;
     --line-lt:#e7e9ee;
    --line-dk:#242a32;
    --mute:#8b909a;
    --mute-dk:#98a0ab;
     --radius:14px;
    --maxw:1200px;
    --ease:cubic-bezier(.22,.61,.36,1);
}
 *{
    box-sizing:border-box;
    margin:0;
    padding:0
}
 html{
    scroll-behavior:smooth
}
 body{
    font-family:"Glacial Indifference","Helvetica Neue",Arial,sans-serif;
     background:var(--white);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
    overflow-x:hidden
}
 h1,h2,h3{
    font-weight:700;
    letter-spacing:-.02em;
    line-height:1.07;
    font-family:"Glacial Indifference","Helvetica Neue",Arial,sans-serif;
}
.text-white{color: #fff}
 .wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 24px
}
 a{
    color:inherit;
    text-decoration:none;
    font-family:"Glacial Indifference","Helvetica Neue",Arial,sans-serif;
}
ul, li{
	list-style: none;
	padding: 0;
	margin: 0;
}
/* icons = olive */
 .ico{
    width:26px;
    height:26px;
    stroke:var(--olive);
    stroke-width:1.8;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
    display:block
}
 .ico-sm{
    width:18px;
    height:18px;
    stroke:var(--olive);
    stroke-width:2;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round
}
 .ph{
    background:linear-gradient(135deg,var(--blue-tint),#dcebf1);
    border:1px solid var(--line-lt);
    border-radius:var(--radius);
     display:flex;
    align-items:center;
    justify-content:center;
    color:var(--mute);
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
     position:relative;
    overflow:hidden;
    text-align:center;
    padding:16px
}
 .ph.dark{
    background:linear-gradient(135deg,#1a1f26,#20262f);
    border-color:var(--line-dk);
    color:var(--mute-dk)
}
 .ph.warm{
    background:linear-gradient(135deg,var(--stone),#e6e1d8)
}
 .ph.olive{
    background:linear-gradient(135deg,var(--olive-tint),#e4ebd4)
}
 .ph::after{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(45deg,transparent,transparent 22px,rgba(0,0,0,.015) 22px,rgba(0,0,0,.015) 23px)
}
 .btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:14px 26px;
    border-radius:100px;
    font-size:14px;
    font-weight:700;
     cursor:pointer;
    border:none;
    white-space:nowrap;
    font-family:inherit;
    transition:transform .25s var(--ease),background .25s,color .25s
}
 .btn-primary{
    background:var(--blue);
    color:#fff
}
.btn-primary:hover{
    background:var(--blue-deep);
    transform:translateY(-2px)
}
 .btn-dark{
    background:var(--ink);
    color:#fff
}
.btn-dark:hover{
    background:#000;
    transform:translateY(-2px)
}
 .btn-olive{
    background:var(--olive);
    color:#fff
}
.btn-olive:hover{
    background:var(--olive-deep);
    transform:translateY(-2px)
}
 .btn-ghost{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--ink)
}
.btn-ghost:hover{
    background:var(--ink);
    color:#fff;
    transform:translateY(-2px)
}
 .btn-ghost-lt{
    background:transparent;
    color:#fff;
    border:1px solid rgba(255,255,255,.35)
}
.btn-ghost-lt:hover{
    border-color:#fff;
    transform:translateY(-2px)
}
 .btn .arw{
    transition:transform .25s var(--ease)
}
.btn:hover .arw{
    transform:translateX(3px)
}
 .eyebrow{
    font-size:11px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--blue);
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:8px
}
 .eyebrow::before{
    content:"";
    width:22px;
    height:1px;
    background:var(--blue)
}
/* ===== HEADER ===== */
 header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-lt)
}
 .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:72px;
    gap:24px
}
 .logo-mark{
    font-size:22px;
    font-weight:400;
    letter-spacing:.42em;
    text-transform:uppercase;
    padding-left:.42em
}
 .nav-links{
    display:flex;
    gap:34px;
    font-size:14px;
    color:var(--ink-70);
    margin-left:auto
}
 .nav-links a{
    transition:color .2s;
    position:relative;
    padding:4px 0
}
 .nav-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    width:0;
    height:2px;
    background:var(--blue);
    transition:width .25s
}
 .nav-links a:hover{
    color:var(--ink)
}
.nav-links a:hover::after{
    width:100%
}
 .nav-cta{
    display:flex;
    align-items:center;
    gap:16px
}
 .nav-cart{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    color:var(--ink-70);
    cursor:pointer
}
 .burger{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer
}
.burger span{
    width:22px;
    height:2px;
    background:var(--ink)
}
.hero h1, .whb-header_939153 .wd-nav-main>li>a, .whb-header_939153 .wd-nav-secondary>li>a{
    font-family:"Glacial Indifference","Helvetica Neue",Arial,sans-serif;
}
.page-id-2334 h1, .page-id-2334 h2, .page-id-2334 h3, .page-id-2334 h4, .page-id-2334 h5, .page-id-2334 h6{
    font-family:"Glacial Indifference","Helvetica Neue",Arial,sans-serif;
}
.page-id-2334 a, .page-id-2334 p{
    font-family:"Glacial Indifference","Helvetica Neue",Arial,sans-serif;
}
/* ===== 1 · HERO — media left / text right ===== */
 .hero{
    padding:64px 0;
	overflow: hidden;
}

 .hero-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center
}
.hero-media .vc_column-inner, .hero-media .wpb_wrapper, .hero-media .wpb_content_element{height:100%}
.hero-media .vc_column-inner{
	padding:0;
}
.hero-media, .hero-copy{
	width: 100%;
}
 .hero-media{
/*     height:560px; */
	 height:auto;
    position:relative;
	width: 560px;
}
 .hero-media .ph{
    height:100%
}
 .hero-media .play{
    position:absolute;
    left:24px;
    bottom:24px;
    display:inline-flex;
    align-items:center;
    gap:10px;
     background:rgba(255,255,255,.92);
    border-radius:100px;
    padding:10px 18px 10px 12px;
    font-size:13px;
    font-weight:700;
    backdrop-filter:blur(6px)
}
 .hero-media .play .pbtn{
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--blue);
    display:flex;
    align-items:center;
    justify-content:center
}
 .hero-media .play .pbtn svg{
    width:12px;
    height:12px;
    fill:#fff;
    stroke:none;
    margin-left:2px
}
 .hero-copy h1{
    font-size:clamp(40px,5.4vw,68px)
}
.hero-copy h1 em{
    font-style:normal;
    color:var(--blue)
}
 .hero-copy p.lead{
    color:var(--ink-70);
    font-size:18px;
    margin:24px 0 32px;
    max-width:460px
}
 .hero-cta{
    display:flex;
    gap:14px;
    flex-wrap:wrap
}
 .hero-trust{
    display:flex;
    gap:26px;
    margin-top:40px;
    padding-top:26px;
    border-top:1px solid var(--line-lt)
}
 .hero-trust .stat{
    display:flex;
    align-items:center;
    gap:11px
}
 .hero-trust .stat b{
    font-size:21px;
    display:block;
    line-height:1
}
.hero-trust .stat span{
    font-size:12px;
    color:var(--mute)
}
/* marquee */
 .strip{
    border-top:1px solid var(--line-dk);
    border-bottom:1px solid var(--line-dk);
    background:var(--ink);
    overflow:hidden
}
 .strip-inner{
    display:flex;
    gap:48px;
    padding:15px 0;
    white-space:nowrap;
    animation:scroll 26s linear infinite;
    font-size:13px;
    color:var(--mute-dk);
    letter-spacing:.06em
}
 .strip-inner span{
    display:inline-flex;
    align-items:center;
    gap:9px
}
.strip-inner .ico-sm{
    width:15px;
    height:15px
}
 @keyframes scroll{
    to{
        transform:translateX(-50%)
    }
}
.wd-marquee-item{
	color:#98a0ab; 
	letter-spacing: .06em;
	font-size:13px;
}
.wd-marquee-item span{
    display:inline-flex;
    align-items:center;
    gap:9px
}
.wd-marquee-item .ico-sm{
    width:15px;
    height:15px
}
 section{
    padding:100px 0
}
 .sec-head{
    max-width:640px;
    margin-bottom:48px
}
 .sec-head.center{
    margin:0 auto 52px;
    text-align:center
}
 .sec-head h2{
    font-size:clamp(30px,4vw,46px);
    margin-top:16px
}
 .sec-head p{
    color:var(--ink-70);
    margin-top:16px;
    font-size:17px
}
 .dark-sec{
    background:var(--ink);
    color:#fff
}
.dark-sec .sec-head p{
    color:var(--mute-dk)
}
.dark-sec h2, .dark-sec h3{
    color: #fff;
}
/* ===== 2 · DETAILS — masonry mosaic ===== */
 .mosaic{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:158px;
    gap:16px
}
 .tile{
    border-radius:var(--radius);
    overflow:hidden;
    position:relative
}
 .tile .ph{
    height:100%;
    border-radius:0;
    border:none
}
 .tile.txt{
    padding:26px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:var(--olive-tint);
    border:1px solid var(--line-lt)
}
 .tile.txt.blue{
    background:var(--blue);
    color:#fff
}
.tile.txt.blue h3{color:#fff}
.tile.txt.blue p{
    color:#d5eaf2
}
 .tile.txt.dark{
    background:var(--ink);
    color:#fff
}
.tile.txt.dark h3{color:#fff}
.tile.txt.dark p{
    color:var(--mute-dk)
}
 .tile.txt h3{
    font-size:22px;
    letter-spacing:.02em;
    margin-bottom:10px
}
 .tile.txt p{
    font-size:14px;
    color:var(--ink-70)
}
 .tile .badge{
    position:absolute;
    right:16px;
    bottom:16px;
    background:var(--white);
    border-radius:10px;
    padding:10px 12px;
    text-align:center;
    line-height:1.1
}
 .tile .badge b{
    font-size:20px;
    display:block;
    color:var(--blue)
}
.tile .badge span{
    font-size:9px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--mute)
}
 .t-w2{
    grid-column:span 2
}
.t-h2{
    grid-row:span 2
}
 .tile-ico{
    position:absolute;
    left:16px;
    top:16px;
    background:rgba(255,255,255,.92);
    border-radius:10px;
    padding:8px;
    backdrop-filter:blur(4px)
}

.proc {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px
}
.align-center{
    text-align:center;
}
.proc .icon{
    display:inline-flex;
    width:56px;
    height:56px;
    border-radius:16px;
    background:var(--olive-tint);
    align-items:center;
    justify-content:center;
    margin-bottom:16px
}
.proc .proc-title{
    font-size:19px;
    margin-bottom:6px
}
.proc .proc-text{
    font-size:14px;
    color:var(--ink-70);
    max-width:280px;
    margin:0 auto
}
/* ===== 3 · THREE STEPS — video + interactive stepper ===== */
 .steps-wrap{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:48px;
    align-items:center
}
 .steps-video{
    height:460px;
    position:relative
}
.steps-video .ph{
    height:100%
}
 .steps-video .vlabel{
    position:absolute;
    left:20px;
    top:20px;
    background:rgba(14,17,22,.8);
    color:#fff;
    font-size:12px;
     letter-spacing:.1em;
    text-transform:uppercase;
    padding:8px 14px;
    border-radius:100px;
    display:inline-flex;
    gap:8px;
    align-items:center
}
 .steps-video .vlabel::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#ff5b5b;
    animation:pulse 1.6s infinite
}
 @keyframes pulse{
    50%{
        opacity:.3
    }
}
 .steps-list .step{
    padding:22px;
    border-radius:var(--radius);
    border:1px solid var(--line-dk);
    margin-bottom:14px;
    cursor:pointer;
     transition:all .3s var(--ease);
    display:flex;
    gap:16px;
    align-items:flex-start
}
 .steps-list .step.on{
    background:var(--ink-soft);
    border-color:var(--olive)
}
 .steps-list .step .sico{
    flex-shrink:0;
    width:44px;
    height:44px;
    border-radius:12px;
    background:rgba(91,116,44,.18);
    display:flex;
    align-items:center;
    justify-content:center
}
 .steps-list .step h3{
    font-size:19px;
    margin-bottom:5px
}
 .steps-list .step p{
    font-size:14px;
    color:var(--mute-dk);
    max-height:0;
    overflow:hidden;
    transition:max-height .35s var(--ease)
}
 .steps-list .step.on p{
    max-height:80px
}
 .steps-list .step .snum{
    font-size:12px;
    color:var(--olive);
    font-weight:700;
    letter-spacing:.1em
}
/* ===== 4 · PREMIUM CARDS ===== */
 .prod-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}
 .prod{
    background:var(--white);
    border:1px solid var(--line-lt);
    border-radius:18px;
    overflow:hidden;
     transition:transform .35s var(--ease),box-shadow .35s;
    display:flex;
    flex-direction:column;
    position:relative
}
 .prod:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 50px -20px rgba(14,17,22,.22)
}
 .prod.featured{
    border-color:var(--blue);
    box-shadow:0 20px 44px -22px rgba(0,107,153,.4)
}
 .prod .flag{
    position:absolute;
    top:16px;
    right:16px;
    z-index:2;
    background:var(--blue);
    color:#fff;
    font-size:10px;
     letter-spacing:.12em;
    text-transform:uppercase;
    font-weight:700;
    padding:6px 12px;
    border-radius:100px
}
 .prod .pimg{
    height:280px;
    border:none;
    border-radius:0
}
 .prod .pbody{
    padding:26px;
    display:flex;
    flex-direction:column;
    flex:1
}
 .prod .ptag{
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--olive);
    margin-bottom:10px;
    font-weight:700
}
 .prod h3{
    font-size:24px;
    margin-bottom:8px
}
 .prod .pdesc{
    font-size:14px;
    color:var(--ink-70);
    margin-bottom:20px;
    flex:1
}
 .prod .spec{
    display:flex;
    gap:16px;
    margin-bottom:20px;
    font-size:12px;
    color:var(--mute)
}
 .prod .spec .si{
    display:flex;
    align-items:center;
    gap:6px
}
.prod .spec .ico-sm{
    width:15px;
    height:15px
}
 .prod .prow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:18px;
    border-top:1px solid var(--line-lt)
}
 .prod .price{
    font-size:22px;
    font-weight:700
}
.prod .price small{
    font-size:12px;
    color:var(--mute);
    font-weight:400
}
.prod .add-to-cart-button {
    padding: 10px 15px;
}
.prod .add-to-cart-button a{
	background: transparent;
    color: #fff;
    padding: 0 15px;
    line-height: normal;
    display: inline-flex;
    height: 25px;
	min-height:25px;
	font-size:16px;
}
/* ===== 5 · REVIEWS — scrolling left column ===== */
 .rev-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:center
}
 .rev-scroll{
    height:520px;
    overflow:hidden;
    position:relative;
    -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);
    mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)
}
 .rev-track{
    display:flex;
    flex-direction:column;
    gap:16px;
    animation:revscroll 26s linear infinite
}
 .rev-scroll:hover .rev-track{
    animation-play-state:paused
}
 @keyframes revscroll{
    to{
        transform:translateY(-50%)
    }
}
 .review{
    background:var(--paper);
    border:1px solid var(--line-lt);
    border-radius:var(--radius);
    padding:22px
}
 .stars{
    color:var(--olive);
    font-size:14px;
    letter-spacing:2px;
    margin-bottom:10px
}
 .review p{
    font-size:15px
}
.review .who{
    margin-top:14px;
    font-size:13px;
    color:var(--mute);
    font-weight:700
}
.review .who span{
    font-weight:400
}
 .rev-copy h2{
    font-size:clamp(30px,4vw,44px);
    margin:16px 0
}
 .rev-copy p{
    color:var(--ink-70);
    font-size:17px;
    margin-bottom:26px
}
 .rev-metric{
    display:flex;
    gap:36px;
    margin-top:8px
}
 .rev-metric b{
    font-size:34px;
    display:block;
    color:var(--blue);
    line-height:1
}
 .rev-metric span{
    font-size:13px;
    color:var(--mute)
}
/* ===== 6 · BUILDERS HOOK ===== */
 .builders{
    background:var(--ink);
    color:#fff;
    border-radius:24px;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 1fr
}
 .builders .b-media{
    min-height:480px;
    position:relative
}
.builders .b-media .ph{
    height:100%;
    border-radius:0;
    border:none
}
 .builders .b-copy{
    padding:56px
}
 .builders .b-copy .eyebrow{
    color:#fff
}
.builders .b-copy .eyebrow::before{
    background:var(--olive)
}
 .builders h2{
    font-size:clamp(28px,3.6vw,42px);
    margin:16px 0 14px
}
 .builders .bsub{
    color:var(--mute-dk);
    font-size:16px;
    margin-bottom:28px
}
 .builders .bperks{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:30px
}
 .builders .bperks .bp{
    display:flex;
    gap:12px;
    align-items:center;
    font-size:15px
}
 .builders .bperks .ico-sm{
    stroke:var(--olive);
    flex-shrink:0
}
 .bform{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}
 .bform input,.bform select{
    grid-column:span 1;
    background:var(--ink-soft);
    border:1px solid var(--line-dk);
    border-radius:10px;
     padding:13px 15px;
    color:#fff;
    font-size:14px;
    font-family:inherit
}
 .bform input::placeholder{
    color:var(--mute-dk)
}
 .bform input.full{
    grid-column:span 2
}
 .bform .bbtn{
    grid-column:span 2;
    margin-top:4px
}
 .bnote{
    font-size:12px;
    color:var(--mute-dk);
    margin-top:12px
}
/* ===== 7 · PREMIUM FEEL ===== */
 .premium{
    background:linear-gradient(160deg,#0e1116,#1a2028);
    color:#fff;
    border-radius:24px;
    padding:72px 56px;
    position:relative;
    overflow:hidden
}
 .premium::before{
    content:"";
    position:absolute;
    top:-40%;
    right:-10%;
    width:520px;
    height:520px;
    border-radius:50%;
     background:radial-gradient(circle,rgba(0,107,153,.35),transparent 70%)
}
 .premium-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:48px;
    align-items:center;
    position:relative
}
 .premium h2{
    font-size:clamp(30px,4vw,48px);
    margin-bottom:18px
}
 .premium p{
    color:var(--mute-dk);
    font-size:17px;
    margin-bottom:30px;
    max-width:440px
}
 .premium-feats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:32px
}
 .premium-feats .pf{
    padding-left:16px;
    border-left:2px solid var(--olive)
}
 .premium-feats .pf b{
    display:block;
    font-size:16px;
    margin-bottom:4px
}
 .premium-feats .pf span{
    font-size:13px;
    color:var(--mute-dk)
}
 .premium-visual{
    height:400px
}
.premium-visual .ph{
    height:100%
}
/* ===== 8 · ABOUT ===== */
 .about{
    position:relative
}
 .about-head{
    max-width:760px;
    margin:0 auto 56px;
    text-align:center
}
 .about-head .big{
    font-size:clamp(28px,3.8vw,44px);
    font-weight:700;
    line-height:1.25
}
 .about-head .big em{
    font-style:normal;
    color:var(--blue)
}
 .about-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:16px;
    grid-auto-rows:130px
}
 .about-cell{
    border-radius:var(--radius);
    overflow:hidden
}
 .about-cell .ph{
    height:100%;
    border-radius:0;
    border:none
}
 .a1{
    grid-column:span 5;
    grid-row:span 2
}
 .a2{
    grid-column:span 4;
    grid-row:span 1;
    background:var(--olive);
    color:#fff;
    padding:24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-radius:var(--radius)
}
 .a2 b{
    font-size:30px;
    line-height:1
}
.a2 span{
    font-size:13px;
    color:#e4ead4;
    margin-top:6px
}
 .a3{
    grid-column:span 3;
    grid-row:span 2
}
 .a4{
    grid-column:span 4;
    grid-row:span 1
}
 .a5{
    grid-column:span 7;
    grid-row:span 1;
    background:var(--paper);
    border:1px solid var(--line-lt);
    padding:26px;
    display:flex;
    align-items:center;
    border-radius:var(--radius)
}
 .a5 p{
    font-size:17px;
    line-height:1.5
}
.a5 p em{
    font-style:normal;
    color:var(--blue);
    font-weight:700
}
 .a6{
    grid-column:span 5;
    grid-row:span 1
}
/* ===== FINDER QUIZ ===== */
 .finder{
    display:grid;
    grid-template-columns:1fr .9fr;
    gap:48px;
    align-items:center
}
 .finder-q{
    margin-bottom:26px
}
 .finder-q .qlabel{
    font-size:12px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--mute);
    margin-bottom:14px
}
 .opts{
    display:flex;
    gap:12px;
    flex-wrap:wrap
}
 .opt{
    padding:12px 20px;
    border:1px solid var(--line-lt);
    border-radius:100px;
    font-size:14px;
    cursor:pointer;
    transition:all .2s;
    background:transparent;
    color:var(--ink);
    font-family:inherit
}
 .opt:hover,.opt.on{
    background:var(--blue);
    color:#fff;
    border-color:var(--blue)
}
 .finder-result{
    background:var(--ink);
    color:#fff;
    border-radius:18px;
    padding:32px
}
 .finder-result .ph{
    height:200px;
    margin-bottom:22px
}
 .finder-result h3{
    font-size:24px;
    margin-bottom:6px
}
 .finder-result .fr-meta{
    font-size:13px;
    color:var(--mute-dk);
    margin-bottom:20px
}
 .finder-result .fr-row{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    padding:10px 0;
    border-top:1px solid var(--line-dk)
}
 .finder-result .fr-row span:first-child{
    color:var(--mute-dk)
}
/* ===== SOCIAL FEED ===== */
 .social-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:40px
}
 .social-head .handle{
    font-size:15px;
    color:var(--olive);
    font-weight:700;
    margin-top:8px
}
 .social-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}
 .social-cell{
    aspect-ratio:1;
    border-radius:var(--radius);
    overflow:hidden;
    position:relative;
    cursor:pointer
}
 .social-cell .ph{
    height:100%;
    border-radius:0;
    border:none
}
 .social-cell .sov{
    position:absolute;
    inset:0;
    background:rgba(0,107,153,.0);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .3s
}
 .social-cell:hover .sov{
    background:rgba(0,107,153,.55)
}
 .social-cell .sov svg{
    width:26px;
    height:26px;
    stroke:#fff;
    fill:none;
    stroke-width:1.8;
    opacity:0;
    transform:scale(.8);
    transition:all .3s
}
 .social-cell:hover .sov svg{
    opacity:1;
    transform:scale(1)
}
/* cta band */
 .cta-band{
    background:var(--blue);
    color:#fff;
    border-radius:20px;
    padding:64px 48px;
    text-align:center;
    overflow:hidden
}
 .cta-band h2{
    font-size:clamp(30px,4.5vw,52px);
    max-width:720px;
    margin:0 auto 14px
}
 .cta-band p{
    font-size:17px;
    color:#d5eaf2;
    margin-bottom:28px
}
 .cta-band .cta-row{
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap
}
 .cta-perks{
    display:flex;
    gap:32px;
    justify-content:center;
    margin-top:32px;
    font-size:13px;
    color:#d5eaf2
}
 .cta-perks span{
    display:inline-flex;
    align-items:center;
    gap:8px
}
.cta-perks .ico-sm{
    stroke:#fff;
    width:16px;
    height:16px
}
/* faq */
 .faq-wrap{
    max-width:820px;
    margin:0 auto
}
 .faq-item{
    border-bottom:1px solid var(--line-lt);
    padding:22px 0;
    cursor:pointer
}
 .faq-q{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:18px;
    font-weight:700
}
 .faq-q .pm{
    color:var(--olive);
    font-size:22px;
    transition:transform .3s;
    line-height:1
}
.faq-item.open .pm{
    transform:rotate(45deg)
}
 .faq-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s var(--ease);
    color:var(--ink-70)
}
.faq-item.open .faq-a{
    max-height:200px
}
.faq-a p{
    padding-top:14px;
    font-size:15px
}
/* footer */
 footer, .footer{
    background:var(--ink);
    color:#fff;
    padding:72px 0 32px
}
.footer .title{color: #fff;}
 .foot-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:40px;
    margin-bottom:48px
}
 .foot-brand .logo-mark{
    margin-bottom:14px;
    display:inline-block
}
 .foot-brand p{
    color:var(--mute-dk);
    font-size:14px;
    max-width:280px
}
 .foot-col h4{
    font-size:13px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--mute-dk);
    margin-bottom:16px
}
 .foot-col a{
    display:block;
    font-size:14px;
    color:#fff;
    opacity:.8;
    margin-bottom:11px;
    transition:.2s
}
.foot-col a:hover{
    opacity:1;
    color:var(--olive)
}
 .foot-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:24px;
    border-top:1px solid var(--line-dk);
    font-size:13px;
    color:var(--mute-dk);
    flex-wrap:wrap;
    gap:12px
}
 .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s var(--ease),transform .7s var(--ease)
}
.reveal.in{
    opacity:1;
    transform:none
}
 @media (prefers-reduced-motion:reduce){
    .reveal{
        opacity:1;
        transform:none;
        transition:none
    }
    .strip-inner,.rev-track{
        animation:none
    }
    *{
        scroll-behavior:auto
    }
}
/* ===== RESPONSIVE ===== */
 @media(max-width:960px){
     .nav-links{
        display:none
    }
    .burger{
        display:flex
    }
     .hero-grid{
        grid-template-columns:1fr;
        gap:32px
    }
    .hero-media{
        height:380px;
        order:-1
    }
     .mosaic{
        grid-template-columns:repeat(2,1fr)
    }
    .t-w2{
        grid-column:span 2
    }
     .steps-wrap{
        grid-template-columns:1fr;
        gap:32px
    }
    .steps-video{
        height:340px
    }
     .prod-grid{
        grid-template-columns:1fr
    }
     .rev-grid{
        grid-template-columns:1fr;
        gap:32px
    }
    .rev-scroll{
        height:420px;
        order:1
    }
     .builders{
        grid-template-columns:1fr
    }
    .builders .b-media{
        min-height:280px
    }
     .premium-grid{
        grid-template-columns:1fr;
        gap:32px
    }
    .premium{
        padding:48px 32px
    }
     .finder{
        grid-template-columns:1fr;
        gap:32px
    }
     .social-grid{
        grid-template-columns:repeat(2,1fr)
    }
     .about-grid{
        grid-template-columns:repeat(6,1fr)
    }
     .a1,.a3,.a4,.a5,.a6{
        grid-column:span 6
    }
    .a2{
        grid-column:span 6
    }
     .foot-grid{
        grid-template-columns:1fr 1fr
    }
}
 @media(max-width:520px){
     .hero-trust{
        flex-wrap:wrap;
        gap:16px
    }
    .mosaic{
        grid-template-columns:1fr
    }
    .t-w2{
        grid-column:span 1
    }
     .bform{
        grid-template-columns:1fr
    }
    .bform input.full,.bform input,.bform select,.bform .bbtn{
        grid-column:span 1
    }
     .premium-feats{
        grid-template-columns:1fr
    }
    .cta-perks{
        flex-direction:column;
        gap:12px
    }
     .about-grid{
        grid-template-columns:1fr
    }
    .a1,.a2,.a3,.a4,.a5,.a6{
        grid-column:span 1
    }
     .social-grid{
        grid-template-columns:1fr 1fr
    }
     .foot-grid{
        grid-template-columns:1fr
    }
    .rev-metric{
        gap:24px
    }
}