/* Font Awesome, Poppins, and Metropolis are now loaded via tags in the document instead of @import — see index.html. CSS @import is render-blocking and gets stripped or delayed by some hosting/minifier setups (common on WordPress), which caused the fonts to silently fail and fall back to the browser default sans-serif. */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --lime:#DAFA0B; --purple:#4b1c87; --violet:#7c3aed; --midnight:#040208; --bg:#05060a; --text:#f0f2f8; --muted:rgba(240,242,248,.58); --border:rgba(255,255,255,.08); --font-body:'Poppins',sans-serif; --font-button:'Poppins',sans-serif; --font-display:'Metropolis',sans-serif; } html{scroll-behavior:auto;background:var(--bg);overflow-x:hidden} body{font-family:var(--font-body);font-weight:400;color:var(--text);background:var(--bg)} *{-webkit-font-smoothing:antialiased} a{text-decoration:none;color:inherit} img{display:block;max-width:100%} ::selection{background:var(--lime);color:#060810} h1,h2,.sec-title,.ies-title,.hero-copy h1,.hero-endcard h2,.player-copy-title,.cta-title{ font-family:var(--font-display); } h3,h4,h5,h6,.sol-card h3,.tpl-card h3,.svc-heading,.svc-panel-title,.ind-panel h2,.ind-card h3,.test-copy blockquote,.blog-card h3,.player-feat h3{ font-family:var(--font-body); font-weight:600; } strong,b,.mega-sol-name,.mega-feat-name,.mega-res-name,.test-person strong,.mini-person strong,.review-badge-text strong{ font-family:var(--font-body); font-weight:500; } #nav,.nav-logo,.nav-links,.nav-trigger, .sec-eyebrow,.hero-kicker,.ies-eyebrow,.ind-kicker,.svc-eyebrow, .mega-title,.mega-header-link,.mega-col-label,.mega-footer-cta, .tpl-badge,.tpl-logo,.tpl-meta,.filter-btn,.player-spec-chip, .player-feat-num,.metric-card strong,.review-badge-stars,.client-logos-label, .lb-tag,.lb-benefits-label,.tick,.sc-live,.blog-tag,.cta-eyebrow, .foot-col h4,.player-badge-text,.player-badge-sub,.svc-panel-badge{ font-family:var(--font-display); } /* ── NAV ── */ #nav{ position:fixed;left:0;right:0;top:0;z-index:500; display:flex;align-items:center;justify-content:space-between; padding:0 clamp(1.5rem,4vw,4rem);height:60px; transition:background .4s,border-color .4s; border-bottom:1px solid transparent; width:100%; } #nav.solid{background:rgba(5,6,10,.92);backdrop-filter:blur(24px);border-color:var(--border)} .nav-logo{ font-size:1.3rem;font-weight:900;letter-spacing:-.05em;color:#fff;z-index:1; display:inline-flex;align-items:center;line-height:0; } .nav-logo em{font-style:normal;color:var(--lime)} .nav-logo img{ display:block; height:42px; width:auto; } .nav-links{display:flex;gap:0;list-style:none;height:60px} .nav-links > li{position:relative;display:flex;align-items:center} .nav-links > li > a,.nav-trigger{ font-size:.82rem;font-weight:500;color:rgba(255,255,255,.65); transition:color .2s;letter-spacing:.01em; padding:0 1.1rem;height:60px;display:flex;align-items:center;gap:.3rem; background:none;border:none;cursor:pointer; } .nav-links > li > a:hover,.nav-trigger:hover,.nav-links > li.open > .nav-trigger{color:#fff} .nav-trigger-arrow{ font-size:.6rem;opacity:.5;transition:transform .25s,opacity .2s; display:inline-block; } .nav-links > li.open .nav-trigger-arrow{transform:rotate(180deg);opacity:1} /* ── MEGA MENU ── */ .mega{ position:fixed;left:0;right:0;top:60px; background:rgba(7,8,14,.97); backdrop-filter:blur(28px); border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); box-shadow:0 24px 60px rgba(0,0,0,.7); z-index:490; opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-8px); transition:opacity .22s ease,transform .22s ease,visibility .22s; } .nav-links > li.open .mega{opacity:1;visibility:visible;pointer-events:all;transform:translateY(0)} .mega-inner{ max-width:1380px;margin:0 auto; display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,.7fr); gap:0; } /* header bar inside mega */ .mega-header{ grid-column:1/-1; display:flex;align-items:center;gap:2rem; padding:1.1rem clamp(1.5rem,3vw,3rem); border-bottom:1px solid rgba(255,255,255,.07); } .mega-title{font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.02em} .mega-header-link{ font-size:.75rem;font-weight:700;color:var(--lime); display:flex;align-items:center;gap:.3rem;letter-spacing:.01em; transition:gap .2s; } .mega-header-link:hover{gap:.55rem} .mega-header-sep{width:1px;height:14px;background:rgba(255,255,255,.15)} /* columns */ .mega-col{padding:1.5rem clamp(1.25rem,2.5vw,2.5rem) 1.5rem} .mega-col + .mega-col{border-left:1px solid rgba(255,255,255,.07)} .mega-col-label{ font-size:.62rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase; color:rgba(255,255,255,.3);margin-bottom:1rem;padding-bottom:.6rem; border-bottom:1px solid rgba(255,255,255,.06); } /* IES grid — 3 cols of solution items */ .mega-ies-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:.25rem; } .mega-sol{ display:flex;align-items:flex-start;gap:.75rem; padding:.7rem .75rem;border-radius:10px; transition:background .18s;cursor:pointer;text-decoration:none; } .mega-sol:hover{background:rgba(255,255,255,.06)} .mega-sol-icon{ width:36px;height:36px;border-radius:8px;flex-shrink:0; display:grid;place-items:center;font-size:1rem; background:linear-gradient(135deg,rgba(180,227,9,.12),rgba(75,28,135,.2)); border:1px solid rgba(180,227,9,.1); } .mega-sol-icon img{ width:24px;height:24px;object-fit:contain;display:block; } .mega-sol-name{font-size:.8rem;font-weight:700;color:#fff;line-height:1.2;margin-bottom:.15rem} .mega-sol-desc{font-size:.7rem;color:rgba(255,255,255,.45);line-height:1.4} /* features col */ .mega-feat-list{display:flex;flex-direction:column;gap:.15rem} .mega-feat{ display:flex;flex-direction:column; padding:.65rem .75rem;border-radius:10px; text-decoration:none;transition:background .18s; } .mega-feat:hover{background:rgba(255,255,255,.06)} .mega-feat--with-icon{flex-direction:row;align-items:flex-start;gap:.75rem} .mega-feat--with-logo{gap:.55rem} .mega-feat-text{display:flex;flex-direction:column} .mega-feat-name{font-size:.82rem;font-weight:700;color:#fff;margin-bottom:.15rem} .mega-feat-desc{font-size:.7rem;color:rgba(255,255,255,.45);line-height:1.4} /* resources col */ .mega-res-list{display:flex;flex-direction:column;gap:.15rem} .mega-res{ display:flex;flex-direction:column; padding:.65rem .75rem;border-radius:10px; text-decoration:none;transition:background .18s; } .mega-res:hover{background:rgba(255,255,255,.06)} .mega-res-name{font-size:.82rem;font-weight:700;color:#fff;margin-bottom:.1rem} .mega-res-sub{font-size:.7rem;color:rgba(255,255,255,.45)} .mega-res.featured .mega-res-name{color:var(--lime)} .mega-res-divider{height:1px;background:rgba(255,255,255,.07);margin:.6rem 0} /* footer bar */ .mega-footer{ grid-column:1/-1; display:flex;align-items:center;justify-content:space-between; padding:.9rem clamp(1.5rem,3vw,3rem); border-top:1px solid rgba(255,255,255,.07); background:rgba(0,0,0,.3); } .mega-footer-text{font-size:.78rem;color:rgba(255,255,255,.45)} .mega-footer-cta{ font-size:.75rem;font-weight:800;color:var(--lime); display:flex;align-items:center;gap:.4rem;letter-spacing:.04em;text-transform:uppercase; transition:gap .2s; } .mega-footer-cta:hover{color:var(--lime)} .nav-cta{ padding:.55rem 1.25rem; background:var(--lime); color: var(--midnight); font-family: var(--font-button); font-size:.8rem; font-weight:700; border-radius:6px; letter-spacing:.02em; transition:all .2s; white-space:nowrap; z-index:1; } .nav-cta:hover{background:var(--lime);box-shadow:0 8px 24px rgba(180,227,9,.35)} @media(max-width:768px){.nav-links{display:none}.mega{display:none}} /* ── CANVAS PARTICLES ── */ #particles{display:none} /* ── SECTION BASE ── */ section{position:relative;z-index:1} /* ── HERO ── */ #hero.scroll-hero{ --bezel-shine-opacity:0; --caption-media-offset:50vh; --copy-opacity:1; --copy-scale:1; --endcard-opacity:0; --endcard-y:24px; --image-opacity:0; --media-border:0px; --media-height:100vh; --media-radius:0px; --media-shadow-blur:0px; --media-shadow-opacity:.18; --media-x:0px; --media-shadow-y:0px; --media-width:100vw; --media-y:0px; --screen-padding:0px; --video-opacity:1; min-height:250vh; overflow:clip; text-align:center; background:#000; } #hero.scroll-hero::before{ display:none; } .scroll-stage{ position:sticky;top:0; height:100vh;min-height:42rem; overflow:hidden; } .hero-room-bg{ position:absolute; inset:0; z-index:0; background:url("./assets/images/backgrounds/retail_modify.png") center/cover no-repeat; opacity:var(--endcard-opacity); pointer-events:none; } .hero-room-bg::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.08); } .scroll-media{ position:absolute; left:50%;top:calc(50% + var(--media-y)); width:var(--media-width);height:var(--media-height); overflow:hidden; transform:translate(calc(-50% + var(--media-x)),-50%); border:var(--media-border) solid #111318; border-radius:var(--media-radius); background:#000; box-shadow: 0 var(--media-shadow-y) var(--media-shadow-blur) rgba(0,0,0,var(--media-shadow-opacity)), inset 0 0 0 1px rgba(255,255,255,.08); transition:border-color .16s ease,box-shadow .16s ease; will-change:width,height,transform,border-radius; z-index:2; } .scroll-media::before{ content:''; position:absolute;inset:0;z-index:4; background:linear-gradient(135deg,rgba(255,255,255,.2),transparent 30%); opacity:var(--bezel-shine-opacity); pointer-events:none; } .hero-video,.tv-image{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover; } .hero-video{ z-index:1; filter:saturate(.95) contrast(1.08) brightness(.74); opacity:var(--video-opacity); } .tv-image{ z-index:2; padding:var(--screen-padding); background:#000; opacity:var(--image-opacity); } .media-vignette{ position:absolute;inset:0;z-index:3; background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.42)); opacity:var(--video-opacity); pointer-events:none; } .hero-copy{ position:absolute; left:50%;top:50%;z-index:6; width:min(92vw,80rem); transform:translate(-50%,-50%) scale(var(--copy-scale)); color:#fff; opacity:var(--copy-opacity); text-shadow:0 .35rem 2rem rgba(0,0,0,.45); pointer-events:none; } .hero-kicker{ margin-bottom:1.35rem; color:var(--lime); font-size:clamp(1.8rem,4vw,3.5rem); font-weight:900; letter-spacing:-.06em; } .hero-copy h1{ font-family:var(--font-body); font-size:clamp(1.7rem,7vw,80pt) !important; font-weight:700; line-height:1.13; letter-spacing:0; } .hero-copy h1 em{font-style:normal;color:var(--lime)} .hero-copy p:last-child{ max-width:34rem; margin:1.5rem auto 0; color:rgba(255,255,255,.78); font-size:clamp(1rem,1.6vw,1.35rem); line-height:1.55; } .hero-endcard{ position:absolute; left:50%; top:calc(50% + min(18vw, 11rem)); z-index:5; width:min(88vw,46rem); transform:translate(-50%,var(--endcard-y)); color:#fff; opacity:var(--endcard-opacity); pointer-events:none; text-align:center; } .hero-endcard p{ margin-bottom:.35rem; color:rgba(255,255,255,.82); font-size:clamp(1.6rem,3vw,3.5rem); font-weight:500; line-height:1; letter-spacing:-.055em; } .hero-endcard h2{ width:max-content; max-width:100%; margin:0 auto; color:#fff; font-size:clamp(3rem,7vw,7.6rem); font-weight:900; line-height:.9; letter-spacing:-.075em; text-shadow:none; } .hero-screen-caption{ position:absolute; left:50%; top:clamp(53%, calc(50% + var(--caption-media-offset) + clamp(2rem, 6vh, 4.5rem)), 61%); z-index:7; width:min(90vw,42rem); margin:0; text-align:center; color:#0a0a0a; font-size:clamp(1.5rem,3.45vw,2.85rem); font-weight:800; line-height:.98; letter-spacing:-.02em; white-space:normal; text-wrap:balance; opacity:var(--endcard-opacity); transform:translate(-50%,var(--endcard-y)); text-shadow:0 1px 0 rgba(255,255,255,.55); pointer-events:none; } .hero-screen-caption span{ display:inline-block; min-width:7ch; color:#0a0a0a; transition:opacity .35s ease,transform .35s ease; } .hero-screen-caption span.is-changing{ opacity:0; transform:translateY(10px); } @media(max-width:768px){ #hero.scroll-hero{min-height:225vh} .scroll-stage{min-height:36rem} .hero-copy{width:92vw} .hero-copy h1{font-size:clamp(1.7rem,8.3vw,4.25rem) !important;line-height:1.05;letter-spacing:0} .hero-copy p:last-child{font-size:1rem} .hero-endcard{ top:auto;right:auto;bottom:11vh;left:50%; width:min(88vw,28rem); transform:translate(-50%,var(--endcard-y)); text-align:center; } .hero-endcard h2{margin:0 auto;font-size:clamp(3.4rem,16vw,5.4rem)} .hero-endcard p{font-size:clamp(1.6rem,8vw,2.6rem)} .hero-screen-caption{ top:clamp(47%, calc(50% + var(--caption-media-offset) + clamp(1.5rem, 4vh, 2.75rem)), 66%); width:min(86vw,28rem); font-size:clamp(.95rem,4.4vw,1.35rem); } } @media(prefers-reduced-motion:reduce){ #hero.scroll-hero{min-height:120vh} .scroll-stage{position:relative} .hero-endcard{opacity:1;transform:translate(-50%,0)} .hero-screen-caption{opacity:1;transform:translate(-50%,0)} } /* ── GENERAL TEMPLATE ── */ #hero.template-hero{ --bezel-shine-opacity:.2; --copy-opacity:1; --copy-scale:1; --endcard-opacity:0; --media-border:0px; --media-height:100vh; --media-radius:0px; --media-shadow-blur:0px; --media-shadow-opacity:.18; --media-shadow-y:0px; --media-width:100vw; --media-x:0px; --media-y:0px; --video-opacity:1; min-height:100vh; overflow:hidden; } #hero.template-hero .scroll-stage{ position:relative; min-height:100vh; } #hero.template-hero .hero-room-bg, #hero.template-hero .tv-image, #hero.template-hero .hero-endcard{ display:none; } #hero.template-hero .hero-copy{ pointer-events:auto; } .template-content{ position:relative; z-index:1; min-height:45vh; padding:clamp(4rem,8vw,7rem) clamp(1.5rem,4vw,4rem); background:var(--bg); } .template-section-placeholder{ max-width:960px; margin:0 auto; padding:clamp(3rem,6vw,5rem); text-align:center; border:1px dashed rgba(180,227,9,.38); border-radius:28px; background:rgba(255,255,255,.035); } .template-section-placeholder .sec-title{ max-width:11ch; margin-left:auto; margin-right:auto; } .template-section-placeholder .sec-body{ max-width:42rem; margin-left:auto; margin-right:auto; } @keyframes textShimmer{0%{background-position:0%}100%{background-position:200%}} .btn-primary{ display:inline-flex;align-items:center;gap:.5rem; padding:.9rem 2rem;background:var(--lime);color:var(--midnight); font-weight:700;font-size:.9rem;border-radius:8px; transition:all .25s;position:relative;overflow:hidden; font-family: var(--font-button); } .btn-primary::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.15);transform:translateX(-100%);transition:transform .3s} .btn-primary:hover::after{transform:translateX(0)} .btn-primary:hover{box-shadow:0 14px 35px rgba(180,227,9,.4)} .btn-secondary{ display:inline-flex;align-items:center;gap:.5rem; padding:.9rem 2rem; border:1px solid rgba(255,255,255,.18);color:#fff; font-weight:600;font-size:.9rem;border-radius:8px; transition:all .25s; } .btn-secondary:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.07)} /* hero screen mockup */ .hero-screen-wrap{ position:relative;width:min(1000px,90vw); opacity:0;animation:fadeSlideUp 1.1s .85s cubic-bezier(.22,1,.36,1) forwards; } .hero-screen{ width:100%;aspect-ratio:16/9;border-radius:14px; border:1.5px solid rgba(255,255,255,.1); background:#000;overflow:hidden;position:relative; box-shadow:0 0 0 1px rgba(180,227,9,.06),0 50px 120px rgba(0,0,0,.8),0 0 100px rgba(75,28,135,.3); isolation:isolate; } .screen-bezel{position:absolute;inset:0;z-index:5;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 22%);pointer-events:none} .screen-content{position:absolute;inset:0;overflow:hidden;background:#000} /* slideshow strip */ .sc-strip{ display:flex;width:100%;height:100%; transition:transform .85s cubic-bezier(.77,0,.18,1); will-change:transform; } .sc-slide{ flex:0 0 100%;width:100%;height:100%; position:relative;overflow:hidden; } .sc-slide img{width:100%;height:100%;object-fit:cover;display:block} /* progress dots */ .sc-dots{ position:absolute;bottom:10px;left:50%;transform:translateX(-50%); display:flex;gap:6px;z-index:10; } .sc-dot{ width:20px;height:3px;border-radius:2px; background:rgba(255,255,255,0.35); transition:all .3s; } .sc-dot.active{background:var(--lime,#b4e309);width:32px;} @keyframes scProgress{0%{width:0%}100%{width:100%}} /* live mini banner - bottom of screen */ .sc-live{ position:absolute;bottom:0;left:0;right:0;z-index:10; height:28px; display:flex;align-items:center;gap:.5rem; padding:0 .85rem; background:rgba(5,6,10,.82); border-top:1px solid rgba(180,227,9,.2); font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:rgba(180,227,9,.85); } .sc-live::before{ content:'';width:5px;height:5px;border-radius:50%; background:var(--lime);flex-shrink:0; animation:livePulse 1.5s ease-in-out infinite; } @keyframes livePulse{0%,100%{opacity:1}50%{opacity:.3}} /* shift progress bar above live banner */ .sc-progress{ position:absolute;bottom:28px;left:0;height:2px; background:rgba(180,227,9,0.7); animation:scProgress 5s linear infinite; z-index:12; } /* remove pulse ring */ .screen-pulse{display:none} /* scroll cue — just the line, no text */ .scroll-cue{ position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:.6rem; opacity:0;animation:fadeSlideUp .8s 1.4s forwards; } .scroll-cue-text{display:none} .scroll-cue-line{width:1px;height:52px;background:linear-gradient(to bottom,var(--lime),transparent);animation:scrollLineAnim 2s ease-in-out infinite} .ticker-bar{ position:absolute;bottom:0;left:0;right:0;height:38px; background:rgba(0,0,0,.7);border-top:1px solid var(--border); display:flex;align-items:center;overflow:hidden;z-index:6; } .ticker-inner{display:flex;gap:3rem;animation:ticker 30s linear infinite;white-space:nowrap;padding-left:110%} @keyframes ticker{to{transform:translateX(-50%)}} .tick{font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.45);flex-shrink:0} .tick span{color:var(--lime);margin-right:.35rem} /* scroll cue */ .scroll-cue{ position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:.6rem; opacity:0;animation:fadeSlideUp .8s 1.4s forwards; } .scroll-cue-text{font-size:.65rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.3)} .scroll-cue-line{width:1px;height:52px;background:linear-gradient(to bottom,var(--lime),transparent);animation:scrollLineAnim 2s ease-in-out infinite} @keyframes scrollLineAnim{0%,100%{opacity:.4;transform:scaleY(.8)}50%{opacity:1;transform:scaleY(1)}} @keyframes fadeSlideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}} /* ── SCROLL PINNED FEATURE ── */ .pinned-section{ position:relative; min-height:300vh; } .pinned-inner{ position:sticky;top:0;height:100vh; display:flex;align-items:center;justify-content:center; overflow:hidden; } /* ── IES SECTION (pinned) ── */ #ies{ background:#060810; padding-bottom:clamp(4rem,8vw,7rem); position:relative; } #ies::before{ content:''; position:absolute; top:0;left:0;right:0; height:6px; z-index:5; background:linear-gradient(90deg,#671EFF,var(--lime) 60%,#f5ffb0); background-size:200% 100%; animation:sepShimmer 8s linear infinite; } @keyframes sepShimmer{ 0%{background-position:0% 0} 100%{background-position:200% 0} } #ies .pinned-inner{ align-items:stretch; justify-content:flex-start; height:auto; min-height:100vh; overflow:visible; } .ies-stage{ position:relative;width:100%;height:auto;min-height:100vh; display:flex;flex-direction:column;align-items:center;justify-content:flex-start; text-align:center; padding:var(--ies-section-offset, clamp(3rem, 8vh, 6rem)) 2rem clamp(2rem, 4vh, 3rem); } .ies-eyebrow{ font-family:var(--font-display); font-style:normal; font-size:15px; font-weight:700; line-height:1; letter-spacing:3px; text-transform:uppercase; color:#DAFA0B; margin-bottom:1.5rem; display:block; } .ies-title{ font-family:var(--font-body); font-style:normal; font-size:clamp(2.45rem,6.5vw,75pt) !important; font-weight:700; line-height:1.15; letter-spacing:0; max-width:18ch;margin:0 auto 1.5rem; background:none; -webkit-background-clip:initial;background-clip:initial;color:#FDFDFD; } .ies-title em{ font-style:normal;display:block; background:linear-gradient(90deg,#b4e309,#d4ff4a,#fff,#b4e309); background-size:200%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:textShimmer 5s linear infinite; } .ies-body{ font-family:var(--font-body); font-style:normal; font-size:clamp(1rem,2vw,23px) !important; font-weight:400; line-height:1.55; letter-spacing:0; color:#E1E1E1; max-width:58rem; margin:0 auto 2.5rem; } .ies-tags{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;max-width:56rem;margin:0 auto} .ies-tag{ font-size:.78rem;font-weight:600;padding:.4rem 1rem; border-radius:999px;border:1px solid var(--border);color:var(--muted); background:rgba(255,255,255,.04); transition:all .25s;cursor:default; } .ies-tag:hover{border-color:rgba(180,227,9,.5);color:var(--lime);background:rgba(180,227,9,.08);transform:translateY(-2px)} /* ── SOLUTIONS ── */ #solutions{ background:#060810; padding:clamp(5rem,9vw,9rem) clamp(1.5rem,4vw,4rem); } .sol-header{text-align:center;max-width:800px;margin:0 auto 4.5rem} .sec-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);display:block;margin-bottom:1.25rem} .sec-title{font-size:clamp(2.8rem,6vw,6rem);font-weight:900;line-height:.9;letter-spacing:-.06em;margin-bottom:1.25rem} .sec-body{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--muted);line-height:1.65} .sol-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:1px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06);border-radius:20px;overflow:hidden; max-width:1200px;margin:0 auto; } .sol-card{ background:#0b0d18;padding:2.25rem 2rem; position:relative;overflow:hidden; transition:background .3s; cursor:default; } .sol-card-glow{ display:none; } .sol-card:hover{background:#0f1122} .sol-card:hover .sol-card-glow{opacity:1} .sol-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,var(--lime),transparent); transform:scaleX(0);transition:transform .4s; } .sol-card:hover::before{transform:scaleX(1)} .sol-icon{ width:48px;height:48px;border-radius:12px;margin-bottom:1.35rem; display:grid;place-items:center;font-size:1.5rem; background:linear-gradient(135deg,rgba(180,227,9,.12),rgba(75,28,135,.18)); border:1px solid rgba(180,227,9,.12); } .sol-card h3{font-size:1.05rem;font-weight:700;margin-bottom:.6rem;letter-spacing:-.025em} .sol-card p{font-size:.86rem;color:var(--muted);line-height:1.6} @media(max-width:900px){.sol-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.sol-grid{grid-template-columns:1fr}} /* ── LIGHTBOX ── */ .sol-card{cursor:pointer} .sol-card .sol-learn{ display:inline-flex;align-items:center;gap:.35rem;margin-top:.85rem; font-size:.75rem;font-weight:700;color:var(--lime); border-bottom:1px solid rgba(180,227,9,.3);padding-bottom:.1rem; transition:gap .2s,opacity .2s;opacity:0; } .sol-card:hover .sol-learn{opacity:1;gap:.55rem} #ies .sol-grid{ width:min(100%,1280px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.05rem 1.2rem; background:transparent; border:0; border-radius:0; overflow:visible; margin:0 auto; } #ies .sol-card{ min-height:6.2rem; display:flex; align-items:center; gap:1.15rem; padding:1.25rem 1.4rem; position:relative; overflow:hidden; isolation:auto; background:transparent; border:1px solid rgba(255,255,255,.055); border-radius:16px; color:#fff; text-align:left; transition:background .25s,border-color .25s,box-shadow .25s,transform .25s; } #ies .sol-card::before, #ies .sol-card::after{ display:none; } #ies .sol-card:hover, #ies .sol-card:focus-visible{ background:linear-gradient(rgba(255,255,255,.025),rgba(255,255,255,.025)),rgba(9,12,24,.88); border-color:rgba(180,227,9,.18); box-shadow:inset 0 0 0 1px rgba(180,227,9,.08); transform:translateY(-2px); } #ies .sol-card-glow{ display:none; } #ies .sol-icon{ width:60px; height:60px; flex:0 0 60px; display:grid; place-items:center; margin:0; border:0; border-radius:12px; background:#671EFF; position:relative; z-index:2; } #ies .sol-icon img{ width:36px; height:36px; object-fit:contain; } #ies .sol-copy{ min-width:0; position:relative; z-index:2; } #ies .sol-card h3{ margin:0 0 .4rem; font-family:var(--font-body); font-style:normal; font-size:15px; font-weight:700; line-height:15px; letter-spacing:0; color:#FDFDFD; } #ies .sol-card p{ margin:0; max-width:none; font-family:var(--font-body); font-style:normal; font-size:11px; font-weight:500; line-height:18px; letter-spacing:0; color:#E1E1E1; } #ies .sol-card .sol-learn{ display:none; } @media(max-width:620px){ #ies .sol-grid{grid-template-columns:1fr} } #lb-overlay{ position:fixed;inset:0;z-index:900; background:rgba(0,0,0,.82); backdrop-filter:blur(18px); display:flex;align-items:center;justify-content:center; padding:1.5rem; opacity:0;visibility:hidden; transition:opacity .3s ease,visibility .3s; } #lb-overlay.open{opacity:1;visibility:visible} #lb-overlay.open #lb-panel{transform:translateY(0) scale(1);opacity:1} #lb-panel{ position:relative; width:min(660px,100%); background:linear-gradient(145deg,#0e1022,#0b0d1a); border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:2.5rem; box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 80px rgba(75,28,135,.2); transform:translateY(24px) scale(.97);opacity:0; transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s ease; } #lb-panel::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--purple),var(--lime)); border-radius:22px 22px 0 0; } #lb-close{ position:absolute;top:1.25rem;right:1.25rem; width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12); color:#fff;font-size:1rem;cursor:pointer; display:grid;place-items:center;transition:all .2s; } #lb-close:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)} .lb-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem} .lb-icon{ width:56px;height:56px;border-radius:14px;flex-shrink:0; display:grid;place-items:center;font-size:1.6rem; background:linear-gradient(135deg,rgba(180,227,9,.14),rgba(75,28,135,.22)); border:1px solid rgba(180,227,9,.15); } .lb-icon img{ width:30px; height:30px; object-fit:contain; } .lb-title{font-size:1.5rem;font-weight:800;letter-spacing:-.04em} .lb-tag{ display:inline-block;margin-top:.3rem; font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--lime); } .lb-summary{ font-size:.95rem;color:rgba(240,242,248,.75);line-height:1.7; margin-bottom:1.75rem; padding-bottom:1.75rem; border-bottom:1px solid rgba(255,255,255,.07); } .lb-benefits-label{ font-size:.65rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase; color:rgba(255,255,255,.3);margin-bottom:1rem; } .lb-benefits{display:flex;flex-direction:column;gap:.7rem;margin-bottom:2rem} .lb-benefit{ display:flex;align-items:flex-start;gap:.75rem; font-size:.88rem;color:rgba(240,242,248,.8);line-height:1.5; } .lb-benefit-dot{ width:6px;height:6px;border-radius:50%;background:var(--lime); flex-shrink:0;margin-top:.45rem; } .lb-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.25rem} .lb-cta-primary{ display:inline-flex;align-items:center;gap:.5rem; padding:.8rem 1.75rem;background:var(--lime);color:#060810; font-weight:800;font-size:.88rem;border-radius:8px; transition:all .2s;white-space:nowrap; } .lb-cta-primary:hover{background:#d4ff4a;box-shadow:0 10px 28px rgba(180,227,9,.35)} .lb-cta-secondary{ display:inline-flex;align-items:center;gap:.45rem; padding:.8rem 1.4rem; border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8); font-weight:600;font-size:.88rem;border-radius:8px; transition:all .2s;white-space:nowrap; } .lb-cta-secondary:hover{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.06)} /* ── DEMO REQUEST MODAL ── */ #demo-overlay{ position:fixed;inset:0;z-index:900; background:rgba(0,0,0,.82); backdrop-filter:blur(18px); display:flex;align-items:center;justify-content:center; padding:1.5rem; opacity:0;visibility:hidden; transition:opacity .3s ease,visibility .3s; } #demo-overlay.open{opacity:1;visibility:visible} #demo-overlay.open #demo-panel{transform:translateY(0) scale(1);opacity:1} #demo-panel{ position:relative; width:min(620px,100%); max-height:90vh; overflow-y:auto; background:linear-gradient(145deg,#0e1022,#0b0d1a); border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:2.5rem; box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 80px rgba(75,28,135,.2); transform:translateY(24px) scale(.97);opacity:0; transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s ease; } #demo-panel::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,#671EFF,var(--lime)); border-radius:22px 22px 0 0; } #demo-close{ position:absolute;top:1.25rem;right:1.25rem; width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12); color:#fff;font-size:1rem;cursor:pointer; display:grid;place-items:center;transition:all .2s; } #demo-close:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)} .demo-header{margin-bottom:1.75rem} .demo-eyebrow{ display:block;font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:var(--lime);margin-bottom:.6rem; } .demo-title{font-size:1.7rem;font-weight:800;letter-spacing:-.04em;color:#fff;margin-bottom:.5rem} .demo-sub{font-size:.92rem;color:rgba(240,242,248,.6);line-height:1.5} .demo-form{display:flex;flex-direction:column;gap:1.1rem} .demo-field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} .demo-field{display:flex;flex-direction:column;gap:.45rem} .demo-field label{ font-size:.78rem;font-weight:700;color:rgba(240,242,248,.75); } .demo-field input, .demo-field select, .demo-field textarea{ width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:.75rem .9rem; font-size:.9rem; color:#fff; font-family:inherit; transition:border-color .2s,background .2s; } .demo-field input::placeholder, .demo-field textarea::placeholder{color:rgba(240,242,248,.35)} .demo-field input:focus, .demo-field select:focus, .demo-field textarea:focus{ outline:none; border-color:var(--lime); background:rgba(255,255,255,.07); } .demo-field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(255,255,255,0.5)'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9rem center; background-size:1.1rem; padding-right:2.5rem; cursor:pointer; } .demo-field select option{background:#0e1022;color:#fff} .demo-field textarea{resize:vertical;min-height:5rem} .demo-actions{margin-top:.5rem} .demo-submit{ width:100%; display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.9rem 1.75rem;background:var(--lime);color:#060810; font-weight:800;font-size:.92rem;border-radius:10px; border:none;cursor:pointer; transition:all .2s; } .demo-submit:hover{background:#d4ff4a;box-shadow:0 10px 28px rgba(180,227,9,.35)} .demo-success{ display:none; margin-top:.9rem; font-size:.85rem;font-weight:600; color:var(--lime); text-align:center; } .demo-success.show{display:block} @media(max-width:600px){ .demo-field-row{grid-template-columns:1fr} #demo-panel{padding:1.75rem} } /* ── TEMPLATES HORIZONTAL SCROLL ── */ #templates{ padding:clamp(4rem,7vw,7rem) 0; background:#fff; overflow:hidden; } .tpl-header{ padding:0 clamp(1.5rem,4vw,4rem) 2.5rem; text-align:center;max-width:860px;margin:0 auto; } /* ── APPLE TV-STYLE MEDIA GRID ── */ .tpl-stage{ position:relative; width:100%; padding:0 clamp(1rem,3vw,3rem); box-sizing:border-box; } /* Top hero row: left peek + center hero + right peek */ .tpl-hero-row{ display:grid; grid-template-columns:minmax(0,.30fr) minmax(0,1fr) minmax(0,.30fr); gap:5px; margin-bottom:5px; align-items:stretch; } /* Bottom tiles row: 5 equal columns */ .tpl-tiles-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:5px; } /* Base card styles */ .tpl-card{ position:relative; overflow:hidden; border-radius:8px; cursor:pointer; background:#0d0f1a; transition:transform .22s ease, box-shadow .22s ease; } .tpl-card:hover{ transform:scale(1.025); box-shadow:0 16px 50px rgba(0,0,0,.8); z-index:5; } /* Hero center card — drives the row height */ .tpl-card-hero{ aspect-ratio:16/9; min-height:0; } /* Side cards — NO aspect-ratio, they stretch to match hero height */ .tpl-card-side{ border-radius:8px; min-height:0; } /* Small tile cards */ .tpl-card-tile{ aspect-ratio:16/9; border-radius:6px; } /* background image layer */ .tpl-img{ position:absolute;inset:0; background-size:cover;background-position:center; transition:transform .4s ease; } .tpl-card:hover .tpl-img{ transform:scale(1.06); } /* gradient overlay */ .tpl-card::before{ content:'';position:absolute;inset:0;z-index:1; background:rgba(4,3,14,.62); } /* per-card color accents */ .tpl-feat::after, .tpl-promo::after, .tpl-wayfind::after, .tpl-lobby::after, .tpl-social::after, .tpl-employee::after, .tpl-health::after, .tpl-event::after{display:none} /* Unsplash images */ .tpl-feat .tpl-img{background-image:url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1200&q=80')} .tpl-promo .tpl-img{background-image:url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=1200&q=80')} .tpl-wayfind .tpl-img{background-image:url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&q=80')} .tpl-lobby .tpl-img{background-image:url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=1200&q=80')} .tpl-social .tpl-img{background-image:url('https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=1200&q=80')} .tpl-employee .tpl-img{background-image:url('https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&q=80')} .tpl-health .tpl-img{background-image:url('https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?w=1200&q=80')} .tpl-event .tpl-img{background-image:url('https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?w=1200&q=80')} /* badge chip — always visible */ .tpl-badge{ position:absolute;top:.75rem;left:.75rem;z-index:4; font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; padding:.25rem .6rem;border-radius:999px; border:1px solid rgba(255,255,255,.2);background:rgba(5,5,14,.75);backdrop-filter:blur(12px); color:#fff; } /* spectrio logo watermark top-right */ .tpl-logo{ position:absolute;top:.75rem;right:.75rem;z-index:4; font-size:.6rem;font-weight:900;letter-spacing:-.03em;color:rgba(255,255,255,.7); } .tpl-logo em{font-style:normal;color:var(--lime);} /* body text at bottom */ .tpl-body{ position:absolute;bottom:0;left:0;right:0; z-index:3;padding:1rem 1.25rem 1.1rem; } .tpl-card-tile .tpl-body{ padding:.6rem .75rem .7rem; } .tpl-card h3{ font-size:clamp(1rem,2vw,1.75rem);font-weight:900;line-height:1.05; letter-spacing:-.04em;margin-bottom:.25rem;color:#fff; } .tpl-card-tile h3{ font-size:clamp(.72rem,1vw,.92rem); } /* meta line: "Drama • A boy takes the trip…" */ .tpl-meta{ font-size:.73rem;color:rgba(255,255,255,.65); display:flex;align-items:center;gap:.35rem;margin-bottom:.6rem;line-height:1.3; } .tpl-card-tile .tpl-meta{ display:none; } .tpl-meta-dot{ width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.4);flex-shrink:0; } /* CTA pill button — white, filled */ .tpl-cta{ display:inline-flex;align-items:center;gap:.3rem; padding:.4rem .95rem;background:rgba(255,255,255,.92); border:none;font-size:.73rem;font-weight:700;color:#060810;border-radius:999px; transition:all .2s;text-decoration:none; } .tpl-cta:hover{ background:#fff; } .tpl-card-tile .tpl-cta{ padding:.28rem .65rem;font-size:.62rem; } /* Dark fallback for empty space */ .tpl-card-empty{ background:#0d0f1a; border-radius:6px; display:flex;align-items:center;justify-content:center; aspect-ratio:16/9; border:1px solid rgba(255,255,255,.06); color:rgba(255,255,255,.15); font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; } /* Viewport wrapper — no carousel needed */ .tpl-viewport{ display:contents; } /* Hide unused carousel controls */ .tpl-controls{ display:none; } @media(max-width:900px){ .tpl-hero-row{ grid-template-columns:1fr; } .tpl-card-side{ display:none; } .tpl-tiles-row{ grid-template-columns:repeat(3,1fr); } } @media(max-width:560px){ .tpl-tiles-row{ grid-template-columns:repeat(2,1fr); } } @media(max-width:900px){ .tpl-hero-row{ grid-template-columns:1fr; } .tpl-card-side{ display:none; } .tpl-tiles-row{ grid-template-columns:repeat(3,1fr); } } @media(max-width:560px){ .tpl-tiles-row{ grid-template-columns:repeat(2,1fr); } } /* ── SPECTRIO SERVICES (Windows-style accordion + visual) ── */ #spectrio-services{ padding:clamp(5rem,8vw,8rem) clamp(1.5rem,4vw,4rem); background:#ffffff; position:relative;overflow:hidden; } #spectrio-services::before{ display:none; } .svc-inner{ max-width:1500px;margin:0 auto; display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); gap:clamp(2rem,5vw,5rem); align-items:center; overflow:visible; } .svc-eyebrow{ display:block;font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);margin-bottom:1rem; } #spectrio-services .svc-eyebrow{ color:#000; } .svc-heading{ color:var(--Core-Purple, #671EFF); font-family:Poppins; font-size:50pt; font-style:normal; font-weight:700; line-height:55pt; margin-bottom:2.5rem; } /* accordion items */ .svc-accordion{ display:flex;flex-direction:column;gap:.5rem; } .svc-item{ border-radius:14px; border:1px solid rgba(255,255,255,.07); background:#0a0a0a; overflow:hidden; cursor:pointer; transition:border-color .3s, background .3s; } .svc-item.active{ border-color:rgba(180,227,9,.3); background:#0c0e08; } .svc-item-head{ display:flex;align-items:center;gap:1rem; padding:1.25rem 1.5rem; user-select:none; } .svc-item-logo{ height:34px; width:auto; max-width:180px; object-fit:contain; } .svc-item-icon{ width:42px;height:42px;border-radius:10px;flex-shrink:0; display:grid;place-items:center;font-size:1.1rem; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08); transition:background .3s,border-color .3s; } .svc-item.active .svc-item-icon{ background:rgba(180,227,9,.12);border-color:rgba(180,227,9,.2); } .svc-item-label{ font-size:1rem;font-weight:700;color:rgba(255,255,255,.65); transition:color .25s;flex:1; } .svc-item.active .svc-item-label{ color:#fff; } .svc-item-arrow{ font-size:.7rem;color:rgba(255,255,255,.25); transition:transform .3s,color .25s; } .svc-item.active .svc-item-arrow{ transform:rotate(90deg);color:var(--lime); } /* expandable body */ .svc-item-body{ max-height:0;overflow:hidden; transition:max-height .45s cubic-bezier(.25,.46,.45,.94); } .svc-item.active .svc-item-body{ max-height:300px; } .svc-item-body-inner{ padding:0 1.5rem 1.5rem 3.5rem; } .svc-item-desc{ font-size:.88rem;color:rgba(255,255,255,.6);line-height:1.6;margin-bottom:1.1rem; } .svc-item-perks{ display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.2rem; } .svc-perk{ display:flex;align-items:flex-start;gap:.5rem; font-size:.8rem;color:rgba(255,255,255,.5);line-height:1.4; } .svc-perk::before{ content:'✓';color:var(--lime);font-weight:700;font-size:.75rem;margin-top:.05rem;flex-shrink:0; } /* progress bar under active item */ .svc-progress{ height:2px;background:rgba(255,255,255,.06);margin:0 1.5rem 1rem;border-radius:1px;overflow:hidden; } .svc-progress-bar{ height:100%;width:0%;background:var(--lime);border-radius:1px; transition:width 0.1s linear; } .svc-item-cta{ display:inline-flex;align-items:center;gap:.4rem; font-size:.78rem;font-weight:700;color:var(--lime); transition:gap .2s; } .svc-item-cta:hover{ color:var(--lime); } /* right side — visual panel */ .svc-right{ position:relative; } .svc-screen{ width:100%; border-radius:18px; overflow:hidden; background:#0a0b14; /* Windows-style dark bezel */ border:10px solid #111318; box-shadow: -30px 20px 80px rgba(0,0,0,.8), -4px 0 0 rgba(255,255,255,.04) inset; position:relative; aspect-ratio:16/10; transition:transform .5s ease; } /* thin top bar to simulate laptop/monitor chrome */ .svc-screen::before{ display:none; } /* camera dot */ .svc-screen::after{ display:none; } /* individual visual panels */ .svc-panel{ position:absolute;inset:0; display:flex;flex-direction:column; opacity:0;transition:opacity .55s ease; pointer-events:none; } .svc-panel.active{ opacity:1;pointer-events:auto; } .svc-panel-bg{ position:absolute;inset:0; background-size:cover;background-position:center; } .svc-panel-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .svc-panel-overlay{ position:absolute;inset:0; background:linear-gradient(135deg,rgba(4,3,14,.75) 0%,rgba(4,3,14,.25) 100%); } .svc-panel-content{ position:relative;z-index:2; padding:3.5rem 2rem 2rem; display:grid;place-items:center; height:100%; } .svc-panel-logo{ width:min(48%,260px); height:auto; filter:drop-shadow(0 16px 32px rgba(0,0,0,.55)); } .svc-panel-badge{ display:inline-flex;align-items:center;gap:.4rem; padding:.3rem .75rem;border-radius:999px; background:rgba(180,227,9,.12);border:1px solid rgba(180,227,9,.25); font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--lime);align-self:flex-start;margin-bottom:auto; } .svc-panel-bottom{ margin-top:auto; } .svc-panel-icon{ font-size:2.5rem;margin-bottom:.75rem; } .svc-panel-title{ font-size:clamp(1.4rem,2.5vw,2rem);font-weight:900;letter-spacing:-.04em; color:#fff;margin-bottom:.5rem;line-height:1; } .svc-panel-sub{ font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.5; } @keyframes svcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @media(max-width:900px){ .svc-inner{ grid-template-columns:1fr; } .svc-right{ order:-1; } .svc-screen{ border-radius:14px; aspect-ratio:16/9; } } #ind-scroll{ --ind-scroll-height:340vh; position:relative;min-height:var(--ind-scroll-height);overflow:clip; background:#060810; transition:background .5s ease; } #ind-scroll[data-active="0"]{ background:#060810; } #ind-scroll[data-active="1"]{ background:#061711; } #ind-scroll[data-active="2"]{ background:#160711; } #ind-scroll[data-active="3"]{ background:#071516; } .ind-layout{ display:grid;grid-template-columns:minmax(18rem,.75fr) minmax(0,1.35fr); gap:clamp(3rem,7vw,8rem); width:min(100% - 3rem,96rem);min-height:var(--ind-scroll-height);margin:0 auto; } .ind-copy{padding:0vh 0 0vh} .ind-panel{ display:flex;min-height:80vh;flex-direction:column;justify-content:center; opacity:.15;transform:translateY(2.5rem); transition:opacity .4s ease,transform .4s ease; } .ind-panel.is-active{opacity:1;transform:none} .ind-kicker{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);margin-bottom:1.2rem} .ind-panel h2{font-size:clamp(2.2rem,4.5vw,5rem);font-weight:900;line-height:.92;letter-spacing:-.055em;max-width:20rem;margin-bottom:1.2rem} .ind-panel p{font-size:clamp(.95rem,1.4vw,1.15rem);color:var(--muted);max-width:26rem;line-height:1.65;margin-bottom:1.5rem} .ind-panel a{ display:inline-flex;align-items:center;gap:.4rem; font-size:.88rem;font-weight:700;color:var(--lime); border-bottom:1px solid rgba(180,227,9,.4);padding-bottom:.15rem; transition:gap .2s;width:fit-content; } .ind-panel a:hover{gap:.65rem} .ind-media-col{position:relative;min-height:var(--ind-scroll-height)} .ind-sticky{ position:sticky;top:14vh;height:72vh; display:flex;align-items:center;justify-content:center; } .ind-bezel{ position:relative;width:min(54vw,52rem);aspect-ratio:16/9; overflow:hidden;border-radius:14px; border:2px solid rgba(255,255,255,.1);background:#000; box-shadow: 0 3rem 6rem rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.05); transition:box-shadow .5s; } .ind-bezel::before{content:'';position:absolute;inset:0;z-index:4;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 22%);pointer-events:none} .ind-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s linear} .ind-video.is-active{opacity:1} /* bezel active state */ .ind-bezel[data-active="0"], .ind-bezel[data-active="1"], .ind-bezel[data-active="2"], .ind-bezel[data-active="3"]{box-shadow:0 3rem 6rem rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06)} @media(max-width:768px){ #ind-scroll{--ind-scroll-height:320vh} .ind-layout{display:flex;flex-direction:column;min-height:var(--ind-scroll-height);gap:0} .ind-copy{order:2;padding:3rem 0 3rem} .ind-media-col{order:1;position:sticky;top:4rem;z-index:2;min-height:auto} .ind-sticky{position:static;height:auto;padding:1rem 0} .ind-bezel{width:100%} } #client-logo-carousel{ padding:2.4rem 0; overflow:hidden; background:#060810; border-block:1px solid rgba(255,255,255,.06); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .logo-track{ --logo-gap:clamp(2rem,4.5vw,3.5rem); display:flex; align-items:center; width:max-content; animation:clientLogoScroll 32s linear infinite; will-change:transform; } .logo-set{ display:flex; align-items:center; gap:var(--logo-gap); flex:0 0 auto; padding-right:var(--logo-gap); } .logo-track img{ display:block; flex:0 0 auto; width:auto; height:clamp(32px,4vw,42px); max-width:clamp(112px,13vw,150px); object-fit:contain; filter:grayscale(1) brightness(1.8); opacity:.68; } @keyframes clientLogoScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} } @media(prefers-reduced-motion:reduce){ .logo-track{animation:none} } /* ── INDUSTRIES GRID ── */ #industries{ padding:clamp(5rem,8vw,8rem) clamp(1.5rem,4vw,4rem); background:linear-gradient(180deg,#060810 0%,#050711 100%); display:flex;flex-direction:column;align-items:center; } .industries-eyebrow{ display:block; margin:0 0 1rem; font-size:.58rem; font-weight:900; letter-spacing:.34em; text-transform:uppercase; color:var(--lime); } .ind-grid-header{max-width:860px;width:100%;margin:0 auto 2rem;text-align:center} .ind-grid-title{ margin:0 auto; max-width:820px; font-size:clamp(3rem,7.4vw,5.8rem); font-weight:950; line-height:.92; letter-spacing:-.085em; color:#f4f6ff; } .ind-grid-body{ max-width:760px; margin:1.4rem auto 0; color:rgba(216,221,236,.62); font-size:clamp(.95rem,1.15vw,1.08rem); line-height:1.6; } .filter-pills{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1rem;justify-content:center;width:100%;max-width:1200px} .filter-btn{ font-size:.6rem;font-weight:800;padding:.38rem .85rem; border-radius:6px;border:1px solid rgba(255,255,255,.08); background:transparent;color:var(--muted);cursor:pointer; transition:all .22s;letter-spacing:.01em; } .filter-btn:hover,.filter-btn.active{border-color:rgba(180,227,9,.5);color:var(--lime);background:rgba(180,227,9,.07)} .industry-view-toggle{ display:inline-flex; align-items:center; justify-content:center; margin:0 auto 2rem; padding:.62rem 1.35rem; border:1px solid rgba(180,227,9,.38); border-radius:999px; background:rgba(180,227,9,.06); color:var(--lime); font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:background .22s,border-color .22s,color .22s,box-shadow .22s; } .industry-view-toggle:hover, .industry-view-toggle[aria-pressed="true"]{ border-color:rgba(180,227,9,.72); background:rgba(180,227,9,.12); box-shadow:0 10px 26px rgba(180,227,9,.12); } .ind-cards{ position:relative; width:100%; max-width:1040px; min-height:auto; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.7rem; padding:clamp(2.6rem,5vw,4rem) clamp(1rem,3vw,2rem) clamp(2.2rem,4vw,3rem); margin:0 auto; overflow:visible; border:0; border-radius:30px; background:transparent; box-shadow:none; } .ind-cards::before, .ind-cards::after{ content:''; display:none; position:absolute; inset:12%; border:1px solid rgba(255,255,255,.07); border-radius:50%; pointer-events:none; } .ind-cards::after{ inset:24% 18%; border-color:rgba(180,227,9,.12); } .ind-orbit-copy{ display:block; grid-column:1/-1; width:min(100%,42rem); margin:0 auto clamp(1.6rem,3vw,2.45rem); text-align:center; } .ind-orbit-copy.reveal{ transform:none; } .ind-orbit-copy.reveal.in{ transform:none; } .ind-orbit-copy span{ display:block; margin-bottom:.7rem; font-size:.55rem; font-weight:900; letter-spacing:.28em; text-transform:uppercase; color:var(--violet); } .ind-orbit-copy h3{ margin:0 auto .9rem; max-width:36rem; font-size:clamp(2.15rem,5vw,3.95rem); font-weight:950; line-height:.94; letter-spacing:-.075em; color:#fff; transition:opacity .22s ease,transform .22s ease; } .ind-orbit-copy p{ max-width:29rem; margin:0 auto; font-size:clamp(.78rem,1vw,.9rem); line-height:1.65; color:rgba(240,242,248,.5); transition:opacity .22s ease,transform .22s ease; } .ind-orbit-copy.is-changing h3, .ind-orbit-copy.is-changing p{ opacity:0; transform:translateY(10px); } .ind-card{ position:relative; left:auto; top:auto; z-index:3; width:100%; height:auto; min-height:7.25rem; aspect-ratio:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:1.2rem 1rem 1.05rem; border:1px solid rgba(255,255,255,.065); border-radius:10px; background:rgba(255,255,255,.035); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter:none; transition:transform .25s ease,background .25s,border-color .25s,box-shadow .25s; animation:none; animation-delay:var(--d); cursor:pointer; touch-action:auto; user-select:none; } .ind-card:hover, .ind-card:focus-within{ transform:translateY(-3px); background:rgba(255,255,255,.055); border-color:rgba(180,227,9,.28); box-shadow:0 16px 34px rgba(0,0,0,.2),inset 0 0 0 1px rgba(180,227,9,.08); } .ind-card.is-selected{ border-color:rgba(180,227,9,.72); box-shadow:0 22px 56px rgba(75,28,135,.34),0 0 42px rgba(180,227,9,.22); } .ind-card.is-dragging{ z-index:12; cursor:grabbing; animation:none; transition:none; } .ind-cards.is-physics-ready .ind-card{ animation:none; } .ind-card-icon{ width:2.45rem; height:2.45rem; flex:0 0 2.45rem; display:grid; place-items:center; margin:0 0 .85rem; padding:.56rem; border-radius:999px; background:linear-gradient(135deg,var(--lime),var(--lime)); box-shadow:0 0 18px rgba(180,227,9,.22); transition:transform .25s ease,filter .25s ease,box-shadow .25s ease; } .ind-card:hover .ind-card-icon, .ind-card:focus-within .ind-card-icon{ transform:translateY(-1px) scale(1.04); filter:saturate(1.08) brightness(1.02); box-shadow:0 0 24px rgba(180,227,9,.32); } .ind-card-icon img{ width:100%; height:100%; object-fit:contain; filter:brightness(0) saturate(100%) invert(7%) sepia(13%) saturate(1807%) hue-rotate(193deg) brightness(94%) contrast(101%); } .ind-card-icon i{ font-size:1.05rem; color:var(--lime); } .ind-card-copy{ display:flex; flex:1; flex-direction:column; align-items:center; justify-content:flex-start; min-width:0; text-align:center; } .ind-card-copy h3{ margin:0 0 .38rem; font-size:.7rem; font-weight:800; line-height:1.1; letter-spacing:-.02em; color:#fff; } .ind-card-copy p{ margin:0; font-size:.58rem; font-weight:500; line-height:1.35; color:rgba(202,208,224,.45); } .ind-card-copy a{ display:none; } .ind-card-copy a:hover{ color:var(--lime); } .ind-card[data-hidden]{opacity:.2;pointer-events:none;transition:opacity .3s} @keyframes indFloat{ 0%,100%{margin-top:0} 50%{margin-top:-10px} } @media(prefers-reduced-motion:reduce){ .ind-card{ animation:none; } .ind-card:hover .ind-card-icon, .ind-card:focus-within .ind-card-icon{ transform:none; } } @media(min-width:1001px){ .ind-cards.is-space-view{ min-height:clamp(35rem,58vw,43rem); display:block; padding:0; overflow:hidden; border:1px solid rgba(180,227,9,.14); border-radius:32px; background:rgba(255,255,255,.025); } .ind-cards.is-space-view::before, .ind-cards.is-space-view::after{ display:block; } .ind-cards.is-space-view .ind-orbit-copy{ display:block; position:absolute; left:50%; top:50%; width:min(28rem,42vw); z-index:2; text-align:center; transform:translate(-50%,-50%); } .ind-cards.is-space-view .ind-orbit-copy.reveal{ transform:translate(-50%,calc(-50% + 36px)); } .ind-cards.is-space-view .ind-orbit-copy.reveal.in{ transform:translate(-50%,-50%); } .ind-cards.is-space-view .ind-card{ position:absolute; left:var(--x); top:var(--y); width:clamp(4.8rem,8vw,6.8rem); height:clamp(4.8rem,8vw,6.8rem); min-height:0; display:grid; place-items:center; gap:0; padding:.65rem; border:1px solid rgba(255,255,255,.1); border-radius:28px; background:rgba(11,13,24,.72); box-shadow:0 18px 42px rgba(0,0,0,.28); backdrop-filter:blur(18px); animation:indFloat 6.5s ease-in-out infinite; cursor:grab; touch-action:none; } .ind-cards.is-space-view .ind-card:hover, .ind-cards.is-space-view .ind-card:focus-within{ transform:none; } .ind-cards.is-space-view .ind-card-icon{ width:100%; height:100%; flex:0 0 auto; margin:0; border-radius:22px; background:linear-gradient(145deg,rgba(180,227,9,.18),rgba(124,58,237,.16)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); } .ind-cards.is-space-view .ind-card-icon img{ width:100%; height:100%; filter:none; } .ind-cards.is-space-view .ind-card-icon i{ font-size:2.2rem; } .ind-cards.is-space-view .ind-card:hover .ind-card-icon, .ind-cards.is-space-view .ind-card:focus-within .ind-card-icon{ transform:translateY(-4px) scale(1.08) rotate(-3deg); box-shadow:0 12px 28px rgba(180,227,9,.16),inset 0 0 0 1px rgba(180,227,9,.22); } .ind-cards.is-space-view .ind-card-copy{ display:none; } } @media(max-width:1000px){.ind-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:1000px){.industry-view-toggle{display:none}} @media(max-width:680px){.ind-cards{grid-template-columns:1fr}} @media(max-width:420px){.ind-cards{grid-template-columns:1fr}} /* ── INDUSTRIES — missing industry CTA ── */ .ind-missing-cta{ display:flex;align-items:center;justify-content:center; gap:1.25rem;flex-wrap:wrap; padding:2.75rem clamp(1.5rem,4vw,4rem) 0; width:100%;max-width:1200px;margin:0 auto; } .ind-missing-text{ font-size:.95rem;font-weight:600; /* color:var(--muted);margin:0;letter-spacing:.01em; */ color: #fff !important; } .ind-missing-btn{ display:inline-flex;align-items:center;gap:.55rem; padding:.72rem 1.55rem;border-radius:999px; border:2px dashed rgba(180,227,9,.4); background:rgba(180,227,9,.05); color:var(--lime);font-size:.88rem;font-weight:700; letter-spacing:.01em;text-decoration:none; transition:background .22s,border-color .22s,transform .22s,box-shadow .22s; } .ind-missing-btn:hover{ background:rgba(180,227,9,.1);border-color:var(--lime); box-shadow:0 8px 24px rgba(180,227,9,.15); } .ind-missing-btn-icon{font-size:.7rem;opacity:.65} .ind-missing-btn-arrow{transition:transform .2s} .ind-missing-btn:hover .ind-missing-btn-arrow{transform:none} #ind-scroll > .ind-missing-cta{ margin-top:clamp(3rem,8vh,6rem); padding:0 clamp(1.5rem,4vw,4rem) clamp(4rem,8vh,6rem); position:relative; z-index:6; } #ind-scroll .ind-missing-btn{ padding:.55rem 1.25rem; border:0; border-radius:6px; background:var(--lime); color:#060810; font-size:.8rem; font-weight:800; letter-spacing:.02em; } #ind-scroll .ind-missing-btn:hover{ background:var(--lime); box-shadow:0 8px 24px rgba(180,227,9,.35); } /* white-section override for the CTA */ #industries .ind-missing-text{color:rgba(10,12,24,.5)} #industries .ind-missing-btn{ border-color: var(--lime); background:rgba(75,28,135,.06); color:var(--lime); } #industries .ind-missing-btn:hover{ background:rgba(75,28,135,.12);border-color:var(--lime); box-shadow:0 8px 24px rgba(75,28,135,.15); } /* ── MYLO ── */ #mylo{ padding:clamp(5rem,9vw,9rem) clamp(1.5rem,4vw,4rem); background:#fff; } .mylo-inner{display:grid;grid-template-columns:1fr minmax(0,500px);gap:clamp(3rem,6vw,7rem);align-items:center;max-width:1200px;margin:0 auto} .mylo-copy .sec-body{margin-top:1rem;max-width:36rem} .mylo-copy .btn-primary{margin-top:2.25rem;width:fit-content;display:inline-flex} .chat-win{ border:1px solid rgba(255,255,255,.1);border-radius:22px; background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); padding:1.5rem; box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 80px rgba(75,28,135,.18); } .chat-hdr{display:flex;align-items:center;gap:.85rem;padding-bottom:1.25rem;margin-bottom:1.25rem;border-bottom:1px solid var(--border)} .chat-av{ width:44px;height:44px;border-radius:12px;flex-shrink:0; background:linear-gradient(135deg,var(--lime),var(--violet)); display:grid;place-items:center;color:#060810;font-weight:900;font-size:1.15rem; } .chat-name-wrap .chat-nm{font-size:.92rem;font-weight:700} .chat-name-wrap .chat-st{font-size:.72rem;color:var(--lime);margin-top:.12rem} .bubble{max-width:86%;border-radius:16px;padding:.9rem 1.1rem;margin:.55rem 0;font-size:.88rem;line-height:1.55} .bubble.user{margin-left:auto;background:#fff;color:#060810;font-weight:500;border-bottom-right-radius:4px} .bubble.bot{background:rgba(255,255,255,.08);border:1px solid var(--border);border-bottom-left-radius:4px} .bubble.typing{display:flex;align-items:center;gap:.4rem;padding:.75rem 1rem;width:fit-content} .typing-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);opacity:.6;animation:typingBounce 1.2s ease-in-out infinite} .typing-dot:nth-child(2){animation-delay:.15s} .typing-dot:nth-child(3){animation-delay:.3s} @keyframes typingBounce{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-5px);opacity:1}} .chat-suggest{ margin:.6rem 0;border:1px solid rgba(180,227,9,.25);border-radius:12px; background:rgba(180,227,9,.06);padding:.9rem 1rem; color:#d4f55d;font-size:.84rem;font-weight:600;line-height:1.45; } .chat-inp{ display:flex;align-items:center;gap:.75rem; border:1px solid var(--border);border-radius:999px; background:rgba(255,255,255,.05);padding:.65rem .65rem .65rem 1.1rem; margin-top:1rem; } .chat-inp span{font-size:.82rem;color:var(--muted);flex:1} .chat-ask{ padding:.5rem 1rem;border-radius:999px;background:var(--purple); color:#fff;font-size:.78rem;font-weight:700;border:none;cursor:pointer; transition:background .2s;flex-shrink:0; } .chat-ask:hover{background:var(--violet)} @media(max-width:900px){.mylo-inner{grid-template-columns:1fr}} /* ── TESTIMONIALS ── */ #testimonials{ padding:clamp(5rem,9vw,9rem) clamp(1.5rem,4vw,4rem); background:#060810; } .test-header{text-align:center;max-width:760px;margin:0 auto 4rem} .test-header .sec-body{margin-top:1rem} .test-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.5rem;max-width:1200px;margin:0 auto} .test-feature{ border-radius:22px;border:1px solid var(--border);overflow:hidden; display:grid;grid-template-columns:1fr 1fr; background:#0b0d18; transition:border-color .35s,transform .35s; min-height:420px; } .test-feature:hover{border-color:rgba(180,227,9,.25);transform:translateY(-5px)} .test-copy{padding:2.5rem;display:flex;flex-direction:column;justify-content:space-between} .qmark{font-size:5rem;line-height:.55;color:var(--lime);opacity:.65;font-weight:900;margin-bottom:.75rem} .test-copy blockquote{font-size:clamp(1.05rem,1.7vw,1.4rem);font-weight:600;line-height:1.38;letter-spacing:-.025em;flex:1} .test-person{display:flex;align-items:center;gap:.85rem;margin-top:2rem} .test-person img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--border)} .test-person .review-client-logo, .mini-person .review-client-logo{ width:128px; height:48px; padding:.5rem .7rem; border-radius:10px; object-fit:contain; background:#fff; border:1px solid rgba(255,255,255,.12); } .test-person strong{display:block;font-size:.85rem;font-weight:700} .test-person span{display:block;font-size:.76rem;color:var(--muted);margin-top:.12rem} .test-img-wrap{position:relative;overflow:hidden} .test-img-wrap img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .5s} .test-feature:hover .test-img-wrap img{transform:scale(1.04)} .test-img-badge{ position:absolute;bottom:1.1rem;right:1.1rem; background:rgba(5,6,10,.85);border:1px solid var(--border); border-radius:10px;padding:.55rem .85rem;backdrop-filter:blur(10px); } .test-img-badge span{display:block;font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)} .test-img-badge small{display:block;font-size:.76rem;color:var(--muted);margin-top:.1rem} .test-side{display:flex;flex-direction:column;gap:1.25rem} .test-mini{ border-radius:18px;border:1px solid var(--border);overflow:hidden; display:grid;grid-template-columns:minmax(130px,.45fr) 1fr; background:#0b0d18; transition:border-color .3s,transform .3s; min-height:calc((420px - 1.25rem) / 2); } .test-mini:hover{border-color:rgba(180,227,9,.25);transform:translateY(-5px)} .test-mini-img{overflow:hidden} .test-mini-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .5s} .test-mini:hover .test-mini-img img{transform:scale(1.05)} .test-mini-body{padding:1.25rem;display:flex;flex-direction:column;justify-content:center} .stars{color:#FFB400;font-size:.85rem;letter-spacing:.04em;margin-bottom:.6rem} .test-mini-body blockquote{font-size:.83rem;color:var(--muted);line-height:1.5;font-weight:500} .mini-person{display:flex;align-items:center;gap:.6rem;margin-top:.85rem} .mini-person img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1.5px solid var(--border)} .mini-person strong{display:block;font-size:.76rem;font-weight:700} .mini-person span{font-size:.68rem;color:var(--muted)} .metrics-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;max-width:1200px;margin:1.5rem auto 0} .metric-card{ border-radius:16px;border:1px solid var(--border);background:#0b0d18; padding:1.5rem 1.75rem;display:flex;align-items:center;gap:1.2rem; transition:border-color .3s,transform .3s; } .metric-card:hover{border-color:rgba(180,227,9,.3);transform:translateY(-4px)} .m-icon{ width:52px;height:52px;border-radius:12px;flex-shrink:0; display:grid;place-items:center;font-size:1.25rem;font-weight:900; background:linear-gradient(135deg,rgba(180,227,9,.13),rgba(75,28,135,.2)); border:1px solid rgba(180,227,9,.13);color:var(--lime); } .metric-card strong{display:block;font-size:clamp(2rem,3.5vw,3rem);font-weight:900;color:#fff;line-height:1;letter-spacing:-.055em} .metric-card p{font-size:.82rem;color:var(--muted);line-height:1.35;margin-top:.3rem} @media(max-width:900px){.test-grid{grid-template-columns:1fr}.test-feature{grid-template-columns:1fr}.metrics-row{grid-template-columns:1fr}} @media(max-width:560px){.test-mini{grid-template-columns:1fr}} /* ── REVIEW PLATFORM BADGES ── */ .review-badges-row{ display:flex;align-items:center;justify-content:center;gap:1.5rem; flex-wrap:wrap;margin:0 auto 3rem;max-width:1200px; } .review-badge{ display:flex;align-items:center;gap:.65rem; background:#0b0d18;border:1px solid var(--border); border-radius:14px;padding:.85rem 1.25rem; transition:border-color .3s,transform .3s; min-width:180px; } .review-badge:hover{border-color:rgba(180,227,9,.3);transform:translateY(-3px)} .review-badge-icon{ width:38px;height:38px;border-radius:8px;flex-shrink:0; display:grid;place-items:center;font-size:1.2rem; } .review-badge-icon.capterra{background:#ff9d28;color:#fff} .review-badge-icon.g2{background:#ff492c;color:#fff;font-weight:900;font-size:.85rem;letter-spacing:-.02em} .review-badge-icon.google{background:#fff;color:#4285F4;font-weight:900;font-size:.85rem} .review-badge-text strong{display:block;font-size:.82rem;font-weight:700;color:#fff} .review-badge-text span{display:block;font-size:.7rem;color:var(--muted);margin-top:.1rem} .review-badge-stars{color:#FFB400;font-size:.72rem;letter-spacing:.04em} /* ── CLIENT LOGOS STRIP ── */ .client-logos-wrap{ text-align:center;max-width:1200px;margin:0 auto 4rem; padding:2rem clamp(1.5rem,4vw,4rem); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .client-logos-label{ font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:rgba(255,255,255,.28);margin-bottom:1.75rem; } .client-logos-grid{ display:flex;align-items:center;justify-content:center; flex-wrap:wrap;gap:2rem 3rem; } .client-logo-img{ display:block; width:clamp(110px,12vw,150px); height:clamp(42px,5vw,56px); object-fit:contain; opacity:.72; filter:grayscale(1) brightness(1.15); transition:opacity .25s,filter .25s; } .client-logo-img:hover{ opacity:1; filter:grayscale(0) brightness(1); } /* ── SPECTRIO PLAYER ── */ #player{ position:relative;overflow:hidden; background:var(--bg); } /* Big cinematic banner — text left, device right */ .player-cinematic{ position:relative; min-height:100vh; display:grid; grid-template-columns:1fr 1fr; align-items:center; background:var(--bg); overflow:visible; } /* animated grid */ .player-cin-grid{ display:none; } .player-copy{ padding:clamp(4rem,8vw,7rem) clamp(2rem,5vw,5rem); position:relative;z-index:2; } .player-copy .sec-eyebrow{margin-bottom:1.5rem} .player-copy-title{ font-size:clamp(3rem,7vw,7rem);font-weight:900;line-height:.88;letter-spacing:-.07em; margin-bottom:1.5rem; } .player-copy-title em{ font-style:normal;display:block; background:linear-gradient(90deg,#b4e309,#d4ff4a,#fff,#b4e309); background-size:200%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:textShimmer 5s linear infinite; } .player-copy-sub{ font-size:clamp(1rem,1.4vw,1.15rem);color:var(--muted);line-height:1.7; max-width:36rem;margin-bottom:2.5rem; } .player-copy-btns{display:flex;gap:1rem;flex-wrap:wrap} /* device side */ .player-device-side{ position:relative;z-index:2; display:flex;align-items:center;justify-content:center; padding:clamp(2rem,4vw,4rem) clamp(1rem,2vw,2rem); overflow:visible; } .player-device-wrap{ position:relative;width:min(820px,100%); } /* glow orb behind device */ .player-device-glow{ display:none; } @keyframes glowPulse{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}} .player-device-img{ position:relative;z-index:1;width:100%; animation:deviceFloat 6s ease-in-out infinite; filter:none; mix-blend-mode:normal; background:transparent; } @keyframes deviceFloat{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-18px)}} .player-hotspot{ position:absolute; left:52%; top:78%; z-index:4; width:44px; height:44px; display:grid; place-items:center; border:2px solid rgba(212,255,74,.95); border-radius:50%; background:var(--lime); color:#060810; cursor:pointer; font-size:1.8rem; font-weight:900; line-height:1; box-shadow:0 0 0 8px rgba(180,227,9,.08),0 0 30px rgba(180,227,9,.45); transform:translate(-50%,-50%); transition:transform .22s ease,box-shadow .22s ease,background .22s ease; } .player-hotspot::before{ content:''; position:absolute; inset:-10px; border:1px solid rgba(180,227,9,.35); border-radius:50%; animation:hotspotPulse 2s ease-in-out infinite; } .player-hotspot:hover, .player-hotspot:focus-visible{ background:var(--lime); box-shadow:0 0 0 10px rgba(180,227,9,.12),0 0 42px rgba(180,227,9,.65); outline:none; transform:translate(-50%,-50%) scale(1.08); } @keyframes hotspotPulse{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}} .player-hotspot-modal{ position:fixed; inset:0; z-index:9200; display:grid; place-items:center; padding:1.5rem; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .24s ease,visibility .24s ease; } .player-hotspot-modal.open{ opacity:1; visibility:visible; pointer-events:auto; } .player-hotspot-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(12px); } .player-hotspot-panel{ position:relative; z-index:1; width:min(92vw,520px); border:1px solid rgba(180,227,9,.72); border-radius:22px; background:linear-gradient(145deg,#090a12,#04050a); box-shadow:0 30px 90px rgba(0,0,0,.65),0 0 44px rgba(180,227,9,.12); padding:2rem; color:#fff; transform:translateY(18px) scale(.96); transition:transform .24s ease; } .player-hotspot-modal.open .player-hotspot-panel{transform:translateY(0) scale(1)} .player-hotspot-close{ position:absolute; right:1rem; top:1rem; width:34px; height:34px; border:1px solid rgba(180,227,9,.35); border-radius:50%; background:rgba(255,255,255,.04); color:#fff; cursor:pointer; font-size:1.25rem; line-height:1; } .player-hotspot-close:hover{border-color:var(--lime);color:var(--lime)} .player-hotspot-eyebrow{ display:block; margin-bottom:.85rem; color:var(--lime); font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; } .player-hotspot-panel h3{ max-width:11ch; font-size:clamp(2rem,5vw,3.5rem); font-weight:900; line-height:.92; letter-spacing:-.06em; margin-bottom:1rem; } .player-hotspot-panel p{ color:rgba(255,255,255,.68); font-size:1rem; line-height:1.65; margin-bottom:1.25rem; } .player-hotspot-list{ display:flex; flex-wrap:wrap; gap:.55rem; } .player-hotspot-list span{ border:1px solid rgba(180,227,9,.22); border-radius:999px; background:rgba(180,227,9,.07); color:rgba(255,255,255,.86); padding:.38rem .75rem; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } /* callout badges that float around the device */ .player-badge{ position:absolute;z-index:3; background:rgba(10,10,20,.85);border:1px solid rgba(180,227,9,.3); backdrop-filter:blur(16px);border-radius:12px;padding:.65rem 1rem; display:flex;align-items:center;gap:.6rem;white-space:nowrap; animation:badgeFloat 5s ease-in-out infinite; } .player-badge-icon{font-size:1.1rem} .player-badge-text{font-size:.75rem;font-weight:700;color:#fff;letter-spacing:.01em} .player-badge-sub{font-size:.65rem;color:var(--lime);font-weight:600;margin-top:.08rem} .pb-1{top:12%;right:-4%;animation-delay:0s} .pb-2{bottom:20%;right:-2%;animation-delay:1.5s} .pb-3{top:55%;left:-6%;animation-delay:3s} @keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} /* features strip */ .player-features{ display:grid;grid-template-columns:repeat(3,1fr); gap:0;background:transparent; max-width:100%;border-top:1px solid rgba(255,255,255,.06); } .player-feat{ padding:2.5rem clamp(1.5rem,3vw,3rem); background:rgba(255,255,255,.02); border-right:1px solid rgba(255,255,255,.06); position:relative;overflow:hidden;transition:background .3s; } .player-feat:last-child{border-right:none} .player-feat:hover{background:rgba(124,58,237,.08)} .player-feat::after{ content:'';position:absolute;bottom:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--purple),var(--lime)); transform:scaleX(0);transform-origin:left;transition:transform .4s; } .player-feat:hover::after{transform:scaleX(1)} .player-feat-num{ font-size:2.5rem;font-weight:900;letter-spacing:-.06em; color:var(--lime);line-height:1;margin-bottom:.5rem; } .player-feat h3{font-size:1rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.5rem;color:#fff} .player-feat p{font-size:.84rem;color:var(--muted);line-height:1.6} /* specs row */ .player-specs{ display:flex;flex-wrap:wrap;gap:.5rem; padding:1.75rem clamp(1.5rem,4vw,4rem); background:rgba(255,255,255,.02); border-top:1px solid rgba(255,255,255,.06); justify-content:center; } .player-spec-chip{ font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; padding:.3rem .85rem;border-radius:999px; border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55); background:transparent;transition:all .2s;cursor:default; } .player-spec-chip:hover{border-color:rgba(180,227,9,.4);color:var(--lime)} @media(max-width:900px){ .player-cinematic{grid-template-columns:1fr;min-height:auto} .player-device-side{padding-top:0} .player-hotspot{left:52%;top:60%;width:40px;height:40px;font-size:1.6rem} .player-badge{display:none} .player-features{grid-template-columns:1fr} .player-feat{border-right:none;border-bottom:1px solid rgba(255,255,255,.06)} } /* ── BLOG ── */ #blog{ padding:clamp(5rem,9vw,9rem) clamp(1.5rem,4vw,4rem); background:#060810; } .blog-header{text-align:center;max-width:760px;margin:0 auto 3.5rem} .blog-header .sec-body{margin-top:1rem} .blog-grid{ display:grid;grid-template-columns:1.5fr 1fr 1fr; gap:1.25rem;max-width:1200px;margin:0 auto 3rem; } .blog-card{ border-radius:18px;border:1px solid var(--border); background:#0b0d18;overflow:hidden; display:flex;flex-direction:column; transition:border-color .3s,transform .3s; cursor:pointer; } .blog-card:hover{border-color:rgba(180,227,9,.28);transform:translateY(-6px)} .blog-img{ width:100%;overflow:hidden; aspect-ratio:16/9;position:relative;flex-shrink:0; } .blog-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .5s} .blog-card:hover .blog-img img{transform:scale(1.05)} .blog-img-placeholder{ width:100%;height:100%; display:flex;align-items:center;justify-content:center; font-size:2.5rem; } .blog-ph-1{background:linear-gradient(135deg,#1a0a32,#4b1c87 55%,#2a1500)} .blog-ph-2{background:linear-gradient(135deg,#060e1a,#0d2a18 60%,#060810)} .blog-ph-3{background:linear-gradient(135deg,#0d0618,#2a0a50 60%,#060810)} .blog-body{padding:1.5rem;display:flex;flex-direction:column;flex:1} .blog-tag{ display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.15em; text-transform:uppercase;color:var(--lime);margin-bottom:.75rem; } .blog-card h3{ font-size:clamp(1rem,1.4vw,1.25rem);font-weight:700; line-height:1.25;letter-spacing:-.03em;margin-bottom:.65rem; flex:1; } .blog-card p{font-size:.83rem;color:var(--muted);line-height:1.6;margin-bottom:1.1rem} .blog-meta{ display:flex;align-items:center;justify-content:space-between; padding-top:.85rem;border-top:1px solid var(--border); } .blog-date{font-size:.72rem;color:var(--muted);font-weight:500} .blog-read{ font-size:.72rem;font-weight:700;color:var(--lime); display:inline-flex;align-items:center;gap:.3rem; transition:gap .2s; } .blog-card:hover .blog-read{gap:.55rem} /* featured card bigger text */ .blog-card.featured .blog-body{padding:1.75rem} .blog-card.featured h3{font-size:clamp(1.2rem,2vw,1.65rem)} .blog-view-all{ display:flex;justify-content:center; } .blog-view-green{ background:var(--lime); color:#060810; border-color:var(--lime); } .blog-view-green:hover{ background:var(--lime); color:#060810; } @media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.blog-grid{grid-template-columns:1fr}} /* ── FINAL CTA ── */ #cta{ padding:clamp(7rem,12vw,11rem) clamp(1.5rem,4vw,4rem); text-align:center;position:relative;overflow:hidden; background:#060810; } .cta-grid{ display:none; } .cta-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);display:block;margin-bottom:1.5rem} .cta-title{ text-align:center; font-family:Poppins; font-size:75pt; font-style:normal; font-weight:700; line-height:110px; max-width:none; margin:0 auto 1.25rem; } .cta-title em{font-style:normal;color:var(--lime)} .cta-title-line{ display:block; white-space:nowrap; } .cta-rotate{ display:block; min-width:6.8ch; text-align:center; } .cta-rotate-word{ display:inline-block; opacity:1; transform:translateY(0); transition:opacity .5s ease,transform .5s ease; will-change:opacity,transform; } .cta-rotate-word.is-exiting{ opacity:0; transform:translateY(18px); } .cta-rotate-word.is-entering{ opacity:0; transform:translateY(-18px); } @media(prefers-reduced-motion:reduce){ .cta-rotate-word{ transition:none; will-change:auto; } .cta-rotate-word.is-exiting, .cta-rotate-word.is-entering{ transform:none; } } .cta-body{font-size:clamp(1rem,1.6vw,1.2rem);color:var(--muted);max-width:42rem;line-height:1.65;max-width:80rem;margin:0 auto 2.5rem} .cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} /* ── FOOTER ── */ footer{ background:#000;border-top:1px solid var(--border); padding:clamp(4rem,6vw,5.5rem) clamp(1.5rem,4vw,4rem) 2rem; position:relative;overflow:hidden; } footer::before{ display:none; } .foot-inner{position:relative;z-index:1;max-width:1400px;margin:0 auto} .foot-top{ display:grid;grid-template-columns:1.4fr repeat(3,1fr); gap:clamp(2rem,5vw,5rem);padding-bottom:3rem;border-bottom:1px solid var(--border); } .foot-brand .brand-logo{ font-size:1.4rem;font-weight:900;letter-spacing:-.055em;color:#fff;display:inline-flex; align-items:center;margin-bottom:.6rem;line-height:0; } .foot-brand .brand-logo em{font-style:normal;color:var(--lime)} .foot-brand .brand-logo img{ display:block; height:48px; width:auto; } .foot-brand p{font-size:.85rem;color:var(--muted);line-height:1.65;max-width:22rem} .foot-col h4{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:1.1rem} .foot-col a{display:block;font-size:.86rem;color:rgba(255,255,255,.65);margin-bottom:.65rem;transition:color .2s,transform .2s} .foot-col a:hover{color:#fff;transform:translateX(4px)} .foot-mid{ display:flex;justify-content:space-between;align-items:flex-end; padding:2.5rem 0;border-bottom:1px solid var(--border);gap:2rem;flex-wrap:wrap; } .foot-addr h5{font-size:1rem;font-weight:700;margin-bottom:.75rem} .foot-addr p{font-size:.85rem;color:var(--muted);line-height:1.75;margin-bottom:.5rem} .foot-addr a{color:rgba(255,255,255,.65);transition:color .2s} .foot-addr a:hover{color:#fff} .foot-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap} .foot-demo{ display:inline-flex;align-items:center;height:42px;padding:0 1.35rem; background:var(--purple);color:#fff;border-radius:8px;font-weight:700;font-size:.87rem; transition:all .25s; } .foot-demo:hover{background:var(--lime);color:#060810;transform:translateY(-2px)} .foot-socials{display:flex;gap:.6rem} .foot-socials a{ display:grid;place-items:center;width:42px;height:42px; border-radius:8px;background:rgba(255,255,255,.1);color:#fff;font-weight:700; transition:all .22s; } .foot-socials a:hover{background:#fff;color:#111;transform:translateY(-2px)} .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:1.5rem;gap:1.5rem;flex-wrap:wrap} .foot-bottom p{font-size:.8rem;color:rgba(255,255,255,.35)} .foot-bottom nav{display:flex;flex-wrap:wrap;gap:1.25rem} .foot-bottom a{font-size:.8rem;color:rgba(255,255,255,.38);transition:color .2s} .foot-bottom a:hover{color:rgba(255,255,255,.75)} @media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}} @media(max-width:560px){.foot-top{grid-template-columns:1fr}} /* ── SCROLL REVEAL ── */ .reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)} .reveal.in{opacity:1;transform:none} .reveal-delay-1{transition-delay:.1s; } .reveal-delay-2{transition-delay:.2s} .reveal-delay-3{transition-delay:.3s} .reveal-delay-4{transition-delay:.4s} .section-two-eyebrow{margin-top:0;} /* ── PROGRESS BAR ── */ #progress{position:fixed;top:0;left:0;right:0;height:2px;background:transparent;z-index:499} #progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--purple),var(--lime));transition:width .1s linear} /* ── DIVIDER ── */ .divider{height:1px;background:var(--border);position:relative;z-index:1} /* ══════════════════════════════════════════════ WHITE SECTION OVERRIDES Sections: #templates, #mylo ══════════════════════════════════════════════ */ /* ── TEMPLATES (white) ── */ #templates{ background:#fff !important; border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); } #templates .sec-eyebrow{color:var(--purple)} #templates .sec-title{color:#0a0c18} #templates .sec-body{color:rgba(10,12,24,.6)} /* The media cards themselves have real photos + dark overlays — keep them dark, just brighten the surrounding page chrome */ #templates .tpl-card-empty{ background:#ede8f7; border-color:rgba(0,0,0,.1); color:rgba(10,12,24,.3); } /* ── MYLO (white) ── */ #mylo{ background:#fff !important; border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); } #mylo .sec-eyebrow{color:var(--purple)} #mylo .sec-title{color:#0a0c18} .mylo-brand{ font-weight:900; letter-spacing:.06em; text-transform:uppercase; background:linear-gradient(90deg,var(--purple),var(--lime),var(--violet),var(--purple)); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:myloColorShift 4s linear infinite; } @keyframes myloColorShift{ 0%{background-position:0% 50%} 100%{background-position:300% 50%} } @media(prefers-reduced-motion:reduce){ .mylo-brand{ animation:none; color:var(--purple); background:none; -webkit-background-clip:unset; background-clip:unset; } } #mylo .sec-body{color:rgba(10,12,24,.6)} #mylo .mylo-copy .sec-body{color:rgba(10,12,24,.6)} /* chat window on white bg */ #mylo .chat-win{ background:#f3f0fb; border-color:rgba(75,28,135,.18); box-shadow:0 40px 90px rgba(0,0,0,.08); } #mylo .chat-hdr{border-bottom-color:rgba(75,28,135,.12)} #mylo .chat-nm{color:#0a0c18} #mylo .chat-st{color:var(--purple) !important} #mylo .bubble.bot{ background:rgba(255,255,255,.85); border-color:rgba(75,28,135,.14); color:#0a0c18; } #mylo .bubble.user{background:var(--purple);color:#fff} #mylo .chat-suggest{ border-color:rgba(75,28,135,.3); background:rgba(75,28,135,.07); color:var(--purple); } #mylo .chat-inp{ background:rgba(255,255,255,.8); border-color:rgba(75,28,135,.18); } #mylo .chat-inp span{color:rgba(10,12,24,.4)} #mylo .chat-ask{background:var(--purple)} #mylo .chat-ask:hover{background:var(--violet)} #mylo-fab{ position:fixed; bottom:2rem; left:2rem; z-index:9000; display:flex; align-items:center; gap:.6rem; padding:.7rem 1.25rem .7rem .85rem; background:linear-gradient(135deg,var(--purple),var(--violet)); border:1px solid rgba(180,227,9,.25); border-radius:999px; cursor:pointer; box-shadow:0 8px 32px rgba(75,28,135,.55),0 0 0 1px rgba(255,255,255,.06); transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s; text-decoration:none; color:#fff; font-family:var(--font-body); animation:myloEntrance .7s 1.2s cubic-bezier(.22,1,.36,1) both; } @keyframes myloEntrance{ from{opacity:0;transform:translateY(20px) scale(.9)} to{opacity:1;transform:translateY(0) scale(1)} } #mylo-fab:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 16px 48px rgba(75,28,135,.7),0 0 24px rgba(180,227,9,.18),0 0 0 1px rgba(180,227,9,.35); border-color:rgba(180,227,9,.5); } #mylo-fab:active{transform:translateY(-1px) scale(1.01)} .mylo-avatar{ width:32px;height:32px;border-radius:50%;flex-shrink:0; background:linear-gradient(135deg,var(--lime),#7c3aed); display:grid;place-items:center; font-size:.85rem;font-weight:900;color:#060810; box-shadow:0 0 12px rgba(180,227,9,.35); position:relative; } .mylo-avatar::after{ content:''; position:absolute;top:1px;right:1px; width:8px;height:8px;border-radius:50%; background:var(--lime); border:1.5px solid var(--purple); box-shadow:0 0 6px rgba(180,227,9,.6); animation:myloOnline 2s ease-in-out infinite; } @keyframes myloOnline{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}} .mylo-label{ display:flex;flex-direction:column;gap:.05rem; } .mylo-label-top{ font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:rgba(255,255,255,.5);line-height:1; } .mylo-label-main{ font-size:.88rem;font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1.1; } .mylo-pulse-ring{ position:absolute;inset:-6px;border-radius:50%; border:2px solid rgba(180,227,9,.3); animation:myloRing 2.5s ease-out infinite; pointer-events:none; } @keyframes myloRing{ 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.7);opacity:0} } .mylo-bubble{ position:fixed; bottom:9rem; left:2rem; z-index:8999; max-width:220px; background:#ffffff; border-radius:22px 22px 22px 6px; padding:1rem 2.75rem 1rem 1.25rem; font-family:var(--font-body); font-size:.84rem; font-weight:600; color:#1a0e2e; line-height:1.5; box-shadow: 0 8px 32px rgba(75,28,135,.22), 0 2px 8px rgba(0,0,0,.1), 0 0 0 1.5px rgba(180,227,9,.45); pointer-events:all; opacity:0; transform:translateY(14px) scale(.92); transition:opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1); visibility:hidden; } .mylo-bubble.visible{ opacity:1; transform:translateY(0) scale(1); visibility:visible; } /* rounded speech-bubble tail pointing down-left toward Mylo button */ .mylo-bubble::after{ content:''; position:absolute; bottom:-12px; left:18px; width:20px; height:14px; background:#ffffff; clip-path:polygon(0 0,60% 0,100% 100%); filter:drop-shadow(0 2px 2px rgba(75,28,135,.12)); } /* lime border accent on the tail — pseudo overlay */ .mylo-bubble::before{ content:''; position:absolute; bottom:-14px; left:16px; width:22px; height:16px; background:rgba(180,227,9,.45); clip-path:polygon(0 0,62% 0,100% 100%); z-index:-1; } /* green pulse dot */ .mylo-bubble-dot{ display:inline-block; width:8px;height:8px;border-radius:50%; background:#b4e309; margin-right:.5rem; vertical-align:middle; box-shadow:0 0 7px rgba(180,227,9,.8); animation:bubbleDotPulse 2s ease-in-out infinite; flex-shrink:0; } @keyframes bubbleDotPulse{0%,100%{opacity:1}50%{opacity:.35}} /* close button */ .mylo-bubble-close{ position:absolute;top:.55rem;right:.6rem; background:rgba(75,28,135,.08); border:none;cursor:pointer; color:rgba(26,14,46,.45); font-size:.65rem; line-height:1; width:1.35rem;height:1.35rem; display:grid;place-items:center; border-radius:50%; transition:background .18s, color .18s; } .mylo-bubble-close:hover{ background:rgba(75,28,135,.15); color:rgba(26,14,46,.85); } /* ── AUDIENCE MEASUREMENT PAGE ── */ /* Hero overrides */ .am-hero .hero-copy{ text-align:left; left:clamp(1.5rem,4vw,4rem); transform:translate(0,-50%); width:min(92vw,40rem); } .am-hero-btns{ display:flex;gap:1rem;margin-top:2rem; pointer-events:auto; } /* Sub-nav pills */ .am-subnav{ display:flex;flex-wrap:wrap;gap:.6rem; justify-content:center; padding:2rem clamp(1.5rem,4vw,4rem); max-width:1200px;margin:0 auto; } .am-pill{ font-family:var(--font-display); font-size:.78rem;font-weight:700; padding:.55rem 1.25rem; border-radius:999px; border:1px solid var(--border); color:var(--muted); background:rgba(255,255,255,.04); transition:all .25s; cursor:pointer; text-decoration:none; } .am-pill:hover,.am-pill--active{ border-color:rgba(180,227,9,.5); color:var(--lime); background:rgba(180,227,9,.08); } /* Sections */ .am-section{ padding:clamp(4rem,8vw,7rem) clamp(1.5rem,4vw,4rem); } .am-section--alt{ background:rgba(255,255,255,.02); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .am-section-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); max-width:1200px; margin:0 auto; align-items:start; } .am-section-inner--reverse{ direction:rtl; } .am-section-inner--reverse > *{ direction:ltr; } .am-sec-title{ font-size:clamp(2rem,4.5vw,3.5rem); line-height:.95; margin-bottom:1.25rem; } .am-text-col--wide{ grid-column:span 1; } /* Accordion */ .am-accordion{ display:flex;flex-direction:column; gap:.5rem;margin-top:2rem; } .am-acc-item{ border:1px solid rgba(255,255,255,.07); border-radius:14px; background:rgba(255,255,255,.03); overflow:hidden; transition:border-color .3s,background .3s; } .am-acc-item[open]{ border-color:rgba(180,227,9,.3); background:rgba(180,227,9,.04); } .am-acc-head{ display:flex;align-items:center;gap:1rem; padding:1.1rem 1.3rem; cursor:pointer; list-style:none; user-select:none; } .am-acc-head::-webkit-details-marker{display:none} .am-acc-head::marker{display:none;content:''} .am-acc-icon{ width:38px;height:38px;border-radius:10px;flex-shrink:0; display:grid;place-items:center;font-size:1rem; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08); transition:background .3s,border-color .3s; } .am-acc-item[open] .am-acc-icon{ background:rgba(180,227,9,.12);border-color:rgba(180,227,9,.2); } .am-acc-label{ font-size:.92rem;font-weight:700; color:rgba(255,255,255,.65);flex:1; transition:color .25s; } .am-acc-item[open] .am-acc-label{color:#fff} .am-acc-arrow{ font-size:1.1rem;color:rgba(255,255,255,.25); transition:transform .3s,color .25s; } .am-acc-item[open] .am-acc-arrow{ transform:rotate(90deg);color:var(--lime); } .am-acc-body{ padding:0 1.3rem 1.3rem 3.8rem; } .am-acc-body p{ font-size:.88rem;color:rgba(255,255,255,.6);line-height:1.6;margin-bottom:.6rem; } .am-acc-body strong{ font-size:.82rem;color:rgba(255,255,255,.8);display:block;margin-bottom:.4rem; } .am-key-features{ list-style:none;display:flex;flex-direction:column;gap:.3rem; } .am-key-features li{ font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.5; padding-left:1rem; position:relative; } .am-key-features li::before{ content:'•';position:absolute;left:0;color:var(--lime); } /* Media column */ .am-media-col{ display:flex;flex-direction:column;gap:1.5rem; } .am-media-card{ border-radius:18px; border:1px solid rgba(255,255,255,.08); overflow:hidden; background:#0b0d18; aspect-ratio:16/10; display:flex;align-items:center;justify-content:center; } .am-media-img{ width:100%;height:100%;object-fit:contain;padding:1.5rem; } .am-media-img--photo{ object-fit:cover;padding:0; } .am-media-caption{ font-size:.88rem;color:rgba(255,255,255,.7);line-height:1.6; text-align:center; } .am-media-caption strong{ color:rgba(255,255,255,.85); } .am-media-caption--center{ text-align:center; } .am-media-card--video iframe, .am-media-card--video .am-media-img{ width:100%;height:100%;border:0;display:block;padding:0;object-fit:unset; } /* Metrics list */ .am-metrics-list{ padding:0; } .am-metrics-heading{ font-size:1.05rem;font-weight:700;color:#fff; margin-bottom:1rem;letter-spacing:-.02em; } .am-metric-items{ list-style:none;display:flex;flex-direction:column;gap:.6rem; } .am-metric-items li{ display:flex;align-items:center;gap:.65rem; font-size:.88rem;color:rgba(255,255,255,.65);line-height:1.5; } .am-metric-arrow{ color:var(--lime);font-weight:700;flex-shrink:0; } /* Video placeholder */ .am-media-card--video{ background:linear-gradient(135deg,#0b0d18,#151830); position:relative;cursor:pointer; } .am-video-placeholder{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.75rem;width:100%;height:100%; } .am-play-icon{ width:64px;height:64px;border-radius:50%; background:rgba(180,227,9,.15);border:2px solid rgba(180,227,9,.4); display:grid;place-items:center; font-size:1.5rem;color:var(--lime); transition:all .25s; } .am-media-card--video:hover .am-play-icon{ background:rgba(180,227,9,.25); border-color:var(--lime); transform:scale(1.08); } .am-video-label{ font-size:.78rem;font-weight:700;color:var(--muted); letter-spacing:.1em;text-transform:uppercase; } /* Lower CTA */ .am-lower-cta{ padding:clamp(4rem,8vw,7rem) clamp(1.5rem,4vw,4rem); } .am-cta-card{ max-width:1000px;margin:0 auto; text-align:center; padding:clamp(3rem,6vw,5rem) clamp(2rem,4vw,4rem); border-radius:22px; background:linear-gradient(135deg,var(--purple),var(--violet)); position:relative;overflow:hidden; } .am-cta-card::before{ content:'';position:absolute;inset:0; display:none; pointer-events:none; } .am-cta-title{ font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3.2rem); font-weight:900;line-height:1; letter-spacing:-.05em;color:#fff; margin-bottom:1rem;position:relative; } .am-cta-body{ font-size:clamp(.95rem,1.4vw,1.1rem); color:rgba(255,255,255,.78);line-height:1.6; max-width:36rem;margin:0 auto 2rem; position:relative; } /* Responsive */ @media(max-width:900px){ .am-section-inner{grid-template-columns:1fr} .am-section-inner--reverse{direction:ltr} .am-hero .hero-copy{ left:50%;transform:translate(-50%,-50%);text-align:center; } .am-hero-btns{justify-content:center} } @media(max-width:560px){ .am-subnav{gap:.4rem} .am-pill{font-size:.7rem;padding:.45rem .9rem} } /* ── AUTOMOTIVE SOURCE PAGE ── */ .auto-page{ padding:0; background:var(--bg); color:var(--text); } .auto-section{ padding:clamp(4.5rem,8vw,7rem) clamp(1.5rem,4vw,4rem); position:relative; overflow:hidden; background:#060810; } .auto-section--gray{ background:#0b0d18; border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .auto-inner{ width:min(100%,1200px); margin:0 auto; } .auto-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr); gap:clamp(2rem,5vw,5rem); align-items:start; } .auto-grid--reverse{ grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr); } .auto-kicker{ display:block; margin-bottom:1rem; color:var(--lime); font-family:var(--font-display); font-size:.72rem; font-weight:900; letter-spacing:.2em; text-transform:uppercase; } .auto-title{ margin-bottom:1rem; color:#fff; font-family:var(--font-display); font-size:clamp(2.3rem,5vw,4.8rem); font-weight:900; line-height:.95; letter-spacing:-.06em; } .auto-copy{ color:var(--muted); font-size:clamp(.95rem,1.25vw,1.08rem); line-height:1.72; } .auto-copy + .auto-copy{ margin-top:1rem; } .auto-copy a{ color:var(--lime); font-weight:700; border-bottom:1px solid rgba(180,227,9,.32); } .auto-logo-band{ padding:2.25rem clamp(1.5rem,4vw,4rem); background:#060810; border-bottom:1px solid var(--border); } .auto-logo-label{ margin-bottom:1.35rem; color:rgba(255,255,255,.32); font-family:var(--font-display); font-size:.68rem; font-weight:800; letter-spacing:.18em; text-align:center; text-transform:uppercase; } .auto-logo-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; align-items:center; } .auto-logo-grid img{ max-height:38px; margin:auto; opacity:.42; filter:grayscale(1) invert(1); } .auto-card-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; } .auto-product-card{ display:flex; min-height:100%; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:#0b0d18; box-shadow:0 24px 70px rgba(0,0,0,.34); transition:transform .25s,box-shadow .25s,border-color .25s; } .auto-product-card:hover{ transform:translateY(-4px); border-color:rgba(180,227,9,.28); box-shadow:0 30px 90px rgba(0,0,0,.46),0 0 38px rgba(75,28,135,.14); } .auto-product-img{ min-height:168px; background-position:center; background-size:cover; } .auto-product-body{ display:flex; flex:1; flex-direction:column; padding:1.35rem; } .auto-tag{ display:block; margin-bottom:.55rem; color:var(--lime); font-family:var(--font-display); font-size:.64rem; font-weight:900; letter-spacing:.18em; text-transform:uppercase; } .auto-product-card h3, .auto-feature h3, .auto-stat-card h3{ margin-bottom:.55rem; color:#fff; font-size:1rem; font-weight:800; letter-spacing:-.02em; } .auto-product-card p, .auto-feature p, .auto-stat-card p{ color:var(--muted); font-size:.86rem; line-height:1.58; } .auto-link{ width:fit-content; margin-top:auto; padding-top:1rem; color:var(--lime); font-size:.78rem; font-weight:800; } .auto-stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; } .auto-stat-card, .auto-panel{ border:1px solid var(--border); border-radius:20px; background:#0b0d18; padding:1.5rem; box-shadow:0 24px 70px rgba(0,0,0,.28); } .auto-stat-number{ display:block; margin-bottom:.4rem; color:var(--lime); font-family:var(--font-display); font-size:clamp(2.4rem,5vw,4rem); font-weight:900; line-height:.9; letter-spacing:-.06em; } .auto-feature-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:2rem; } .auto-feature{ border-left:3px solid var(--lime); border-radius:14px; background:#101321; padding:1.2rem 1.35rem; box-shadow:0 18px 55px rgba(0,0,0,.24); } .auto-media-stack{ display:flex; flex-direction:column; gap:1rem; } .auto-media-frame{ overflow:hidden; border:1px solid var(--border); border-radius:22px; background:#000; box-shadow:0 30px 90px rgba(0,0,0,.45); } .auto-media-frame iframe, .auto-media-frame img{ display:block; width:100%; aspect-ratio:16/9; border:0; object-fit:cover; } .auto-audio-list{ display:flex; flex-direction:column; gap:.75rem; margin-top:1.25rem; } .auto-audio-card{ border:1px solid var(--border); border-radius:14px; background:#101321; padding:1rem; } .auto-audio-card audio{ width:100%; } .auto-audio-label{ display:block; margin-top:.55rem; color:var(--muted); font-size:.72rem; font-weight:700; line-height:1.45; text-transform:uppercase; } .auto-benefits{ display:grid; gap:.75rem; margin-top:1.4rem; list-style:none; } .auto-benefits li{ display:flex; gap:.7rem; color:var(--muted); font-size:.95rem; line-height:1.6; } .auto-benefits li::before{ content:'✓'; color:var(--lime); font-weight:900; flex-shrink:0; } .auto-scent-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; } .auto-scent-grid img{ width:100%; aspect-ratio:1; border-radius:14px; object-fit:cover; } .auto-testimonials{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; } .auto-quote{ border:1px solid var(--border); border-radius:22px; background:#0b0d18; padding:2rem; box-shadow:0 24px 70px rgba(0,0,0,.28); } .auto-quote blockquote{ color:#fff; font-size:clamp(1.05rem,1.8vw,1.35rem); font-weight:700; line-height:1.4; letter-spacing:-.025em; } .auto-quote cite{ display:block; margin-top:1.2rem; color:var(--muted); font-size:.86rem; font-style:normal; line-height:1.5; } .auto-index-copy{ color:var(--muted); font-size:clamp(.95rem,1.25vw,1.08rem); line-height:1.7; margin-bottom:1.5rem; } .auto-index-services .svc-screen iframe, .auto-screen-image{ position:absolute; inset:28px 0 0; width:100%; height:calc(100% - 28px); border:0; } .auto-screen-image{ background-position:center; background-size:cover; } .auto-benefit-band{ background:#060810; } .auto-solution-scroll .ind-bezel{ background:#0b0d18; } .auto-ind-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s linear; } .auto-ind-media.is-active{ opacity:1; } .auto-scent-board{ display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; padding:1rem; background:#0b0d18; } .auto-scent-board img{ width:100%; height:100%; min-height:0; object-fit:cover; border-radius:10px; } .auto-test-grid{ margin-top:2rem; } .auto-page #solutions .metrics-row{ margin-top:2rem; } /* Automotive page variants — related to index, but not a clone */ .auto-page #solutions{ display:grid; grid-template-columns:minmax(17rem,.42fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:start; background:linear-gradient(180deg,#060810,#080916); } .auto-page #solutions .sol-header{ position:sticky; top:6rem; text-align:left; margin:0; max-width:34rem; } .auto-page #solutions .sec-title{ font-size:clamp(2.8rem,5.5vw,5.7rem); max-width:8ch; } .auto-page #solutions .sol-grid{ grid-template-columns:repeat(2,1fr); border-radius:28px; gap:1rem; border:0; background:transparent; overflow:visible; } .auto-page #solutions .sol-card{ min-height:18rem; border:1px solid rgba(255,255,255,.08); border-radius:22px; background:#0b0d18; isolation:isolate; box-shadow:0 24px 70px rgba(0,0,0,.28); } .auto-page #solutions .sol-card::before{ height:100%; background:linear-gradient(180deg,rgba(5,6,10,.12),rgba(5,6,10,.88)); transform:none; z-index:0; } .auto-page #solutions .sol-card-glow{ display:block; position:absolute; inset:0; z-index:-1; opacity:.42; background-position:center; background-size:cover; filter:saturate(.75) contrast(1.05); transition:opacity .28s,transform .5s; } .auto-page #solutions .sol-card:hover .sol-card-glow{ opacity:.58; transform:scale(1.04); } .auto-page #solutions .sol-card:nth-child(1) .sol-card-glow{background-image:url('https://www.spectrio.com/wp-content/uploads/2021/11/Automotive-digital-signage.png')} .auto-page #solutions .sol-card:nth-child(2) .sol-card-glow{background-image:url('https://www.spectrio.com/wp-content/uploads/2021/11/Dealership-kiosk.png')} .auto-page #solutions .sol-card:nth-child(3) .sol-card-glow{background-image:url('https://www.spectrio.com/wp-content/uploads/2021/11/Automotive-On-Hold-Messaging-scaled.jpeg')} .auto-page #solutions .sol-card:nth-child(4) .sol-card-glow{background-image:url('https://www.spectrio.com/wp-content/uploads/2021/11/Automotive-Overhead-Messaging-scaled.jpeg')} .auto-page #solutions .sol-card:nth-child(5) .sol-card-glow{background-image:url('https://www.spectrio.com/wp-content/uploads/2021/11/Automotive-WiFi-Marketing-scaled.jpeg')} .auto-page #solutions .sol-card:nth-child(6) .sol-card-glow{background-image:url('https://www.spectrio.com/wp-content/uploads/2021/11/Automotive-Scent-Marketing-scaled.jpeg')} .auto-page #solutions .sol-icon, .auto-page #solutions .sol-card h3, .auto-page #solutions .sol-card p, .auto-page #solutions .sol-learn{ position:relative; z-index:1; } .auto-page #solutions .sol-icon{ background:rgba(5,6,10,.72); backdrop-filter:blur(12px); } .auto-page #solutions .sol-learn{ opacity:1; } .auto-page #solutions .metrics-row{ grid-column:1/-1; margin-top:0; } .auto-page .auto-index-services{ padding-right:clamp(1.5rem,4vw,4rem); background:#0b0d18; } .auto-page .auto-index-services .svc-inner{ max-width:1280px; grid-template-columns:minmax(0,.55fr) minmax(0,.45fr); } .auto-page .auto-index-services .svc-screen{ border-radius:26px; border-right:10px solid #111318; transform:perspective(1200px) rotateY(4deg) rotateX(1deg); box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 70px rgba(180,227,9,.08); } .auto-page .auto-index-services .svc-right{ margin-right:0; } .auto-page .auto-index-services .svc-item{ background:rgba(255,255,255,.04); } .auto-page .auto-benefit-band .player-features{ border-top:0; } .auto-page .auto-benefit-band .player-feat{ padding-top:3.25rem; padding-bottom:3.25rem; } .auto-page .auto-solution-scroll{ min-height:auto; padding:clamp(5rem,8vw,7rem) clamp(1.5rem,4vw,4rem); background:#060810; } .auto-page .auto-solution-scroll .ind-layout{ min-height:auto; width:min(100%,1200px); grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } .auto-page .auto-solution-scroll .ind-copy{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; padding:0; } .auto-page .auto-solution-scroll .ind-panel{ min-height:auto; justify-content:flex-start; opacity:.72; transform:none; padding:1.5rem; border:1px solid var(--border); border-radius:20px; background:#0b0d18; } .auto-page .auto-solution-scroll .ind-panel.is-active{ opacity:1; border-color:rgba(180,227,9,.28); background:rgba(180,227,9,.045); } .auto-page .auto-solution-scroll .ind-panel h2{ font-size:clamp(1.55rem,2.6vw,2.8rem); } .auto-page .auto-solution-scroll .ind-panel p{ margin-bottom:1rem; } .auto-page .auto-solution-scroll .ind-media-col{ min-height:auto; } .auto-page .auto-solution-scroll .ind-sticky{ top:7rem; height:auto; } .auto-page .auto-solution-scroll .ind-bezel{ width:100%; border-radius:28px; } .auto-page #testimonials{ background:#0b0d18; } .auto-page #testimonials .test-header{ text-align:left; max-width:1200px; } .auto-page #testimonials .metrics-row{ margin-bottom:2rem; } .auto-page .auto-test-grid{ grid-template-columns:1fr 1fr; } .auto-page .auto-test-grid .test-mini{ min-height:100%; } .auto-page .auto-test-grid .test-mini-img{ background:#060810; } .auto-page .auto-test-grid .test-mini-img img{ object-fit:contain; padding:1.5rem; } .auto-page #cta{ background:#060810; } .auto-page #cta .cta-title{ max-width:13ch; } @media(max-width:1000px){ .auto-page #solutions, .auto-page .auto-index-services .svc-inner, .auto-page .auto-solution-scroll .ind-layout{ grid-template-columns:1fr; } .auto-page #solutions .sol-header{ position:relative; top:auto; } } @media(max-width:720px){ .auto-page #solutions .sol-grid, .auto-page .auto-solution-scroll .ind-copy, .auto-page .auto-test-grid{ grid-template-columns:1fr; } } @media(max-width:1000px){ .auto-grid, .auto-grid--reverse, .auto-card-grid, .auto-feature-list, .auto-testimonials{ grid-template-columns:1fr; } .auto-logo-grid, .auto-stat-row{ grid-template-columns:repeat(2,1fr); } } @media(max-width:560px){ .auto-logo-grid, .auto-stat-row, .auto-scent-grid{ grid-template-columns:1fr; } } /* USER EDITS */ .talk-mylo{ background-color: var(--purple); color: #fff; } .talk-mylo:hover{ background-color: var(--lime); color: #000; } /* Poppins Bold for key marketing headlines — matches .ies-title */ .hero-copy h1 { font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; } /* Green title typography */ .ies-eyebrow, .sec-eyebrow, .svc-eyebrow, #spectrio-services .svc-eyebrow, .cta-eyebrow, .demo-eyebrow{ font-family: var(--font-display); font-style: normal; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 3px; text-transform: uppercase; color: #DAFA0B; } #spectrio-services .svc-eyebrow{ color: #000; } /* Inline style replacements */ .mega-inner--industries{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,.8fr)} .mega-inner--services{grid-template-columns:repeat(3,1fr)} .mega-inner--support{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,.8fr)} .mega-ies-grid--two-col{grid-template-columns:1fr 1fr} .mega-col-label--offset{margin-top:1rem} .mega-sol--service{flex-direction:column;gap:.75rem;min-height:100%} .mega-service-logo{height:24px;display:flex;align-items:center;justify-content:flex-start} .mega-service-logo img{height:100%;max-width:150px;object-fit:contain;object-position:left center;display:block} .mega-res--with-logo{gap:.55rem} .mega-sol-icon--studio{background:linear-gradient(135deg,rgba(180,227,9,.18),rgba(75,28,135,.25));border:1px solid rgba(180,227,9,.15)} .mega-sol-icon--care{background:linear-gradient(135deg,rgba(0,180,255,.15),rgba(75,28,135,.2));border:1px solid rgba(0,180,255,.12)} .mega-sol-icon--academy{background:linear-gradient(135deg,rgba(255,180,0,.15),rgba(180,227,9,.1));border:1px solid rgba(255,180,0,.12)} .tpl-logo--small{font-size:.5rem} .svc-panel-bg--studio{background-image:url('https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=900&q=80')} .svc-panel-bg--care{background-image:url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=900&q=80')} .svc-panel-bg--academy{background-image:url('https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=900&q=80')} .svc-panel-overlay--care{background:linear-gradient(135deg,rgba(0,30,60,.9) 0%,rgba(4,3,14,.5) 100%)} .svc-panel-overlay--academy{background:linear-gradient(135deg,rgba(40,20,0,.9) 0%,rgba(4,3,14,.5) 100%)} .svc-panel-badge--care{background:rgba(0,180,255,.1);border-color:rgba(0,180,255,.25);color:#4af} .svc-panel-badge--academy{background:rgba(255,180,0,.1);border-color:rgba(255,180,0,.25);color:#fb0} .client-logo--subway{letter-spacing:.08em;font-size:1.3rem} .client-logo--radisson{letter-spacing:.04em} .client-logo--cocacola{font-style:italic;font-size:.95rem} .client-logo-sub--bonvoy{font-size:.7em;letter-spacing:.18em;font-weight:600} .client-logo-sub--scientific{font-size:.65em;letter-spacing:.22em;font-weight:500} .client-logo-sub--hotels{font-size:.65em;letter-spacing:.18em;font-weight:500} .client-logo-sub--bottling{font-style:normal;font-size:.65em;letter-spacing:.14em;font-weight:600} /* ── Responsive polish for the main landing page ── */ @media(max-width:1024px){ .ies-stage{ padding:clamp(4.5rem,10vh,6rem) clamp(1.25rem,4vw,2rem) clamp(3rem,6vh,4rem); } .ies-title, .cta-title{ font-size:clamp(3.25rem,9vw,5.75rem) !important; line-height:1.08; } .hero-copy h1{ font-size:clamp(3.25rem,8.4vw,5.75rem) !important; line-height:1.08; } .cta-title-line{ white-space:normal; } .ies-body{ font-size:clamp(1.05rem,2.6vw,1.35rem) !important; line-height:1.55; } #ies .sol-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:768px){ #nav{ height:58px; padding:0 1rem; } .nav-logo img{ height:34px; } .nav-cta{ padding:.5rem .85rem; font-size:.72rem; } #hero.scroll-hero{ min-height:210vh; } .scroll-stage{ min-height:100svh; } .hero-copy{ top:48%; } .hero-copy h1{ font-size:clamp(1.7rem,8.3vw,4.25rem) !important; line-height:1.05; letter-spacing:0; } .hero-copy p:last-child{ max-width:19rem; margin-top:1rem; font-size:.95rem; } .ies-stage{ min-height:auto; } .ies-eyebrow, .sec-eyebrow, .svc-eyebrow, #spectrio-services .svc-eyebrow, .cta-eyebrow, .demo-eyebrow{ font-size:.72rem; letter-spacing:.18em; } .ies-title{ max-width:10ch; margin-bottom:1rem; font-size:clamp(2.65rem,12vw,4.25rem) !important; line-height:1.05; } .ies-body{ margin-bottom:1.6rem; font-size:1rem !important; line-height:1.65; } #ies .sol-grid{ width:100%; gap:.75rem; } #ies .sol-card{ min-height:auto; padding:1rem; gap:.85rem; border-radius:14px; } #ies .sol-icon{ width:48px; height:48px; flex-basis:48px; } #ies .sol-icon img{ width:28px; height:28px; } #spectrio-services{ padding:clamp(4rem,12vw,5.5rem) 1rem; } .svc-inner{ gap:1.5rem; } .svc-right{ order:0; } .svc-heading{ margin-bottom:1.5rem; font-size:clamp(2.35rem,10vw,3.3rem); } .svc-screen{ border-width:6px; border-radius:14px; box-shadow:0 24px 54px rgba(0,0,0,.35); } .svc-panel-content{ padding:2rem 1rem; } .svc-panel-logo{ width:min(58%,220px); } .svc-item-head{ padding:1rem; } .svc-item-body-inner{ padding:0 1rem 1.2rem; } .svc-item.active .svc-item-body{ max-height:520px; } .svc-progress{ margin:0 1rem 1rem; } #client-logo-carousel{ padding:1.7rem 0; } .logo-track{ --logo-gap:1.5rem; } .logo-track img{ height:30px; max-width:112px; } #cta{ padding:clamp(5rem,16vw,7rem) 1rem; } .cta-title{ max-width:11ch; font-size:clamp(2.65rem,12vw,4.25rem); line-height:1.05; } .cta-title-line{ white-space:normal; } .cta-body{ max-width:34rem; font-size:1rem; } footer{ padding:3.5rem 1rem 1.5rem; } .foot-mid, .foot-bottom{ align-items:flex-start; flex-direction:column; } } @media(max-width:620px){ #ies .sol-grid{ grid-template-columns:1fr; } } @media(max-width:560px){ .hero-screen-caption{ width:min(82vw,22rem); } #ies .sol-card h3{ line-height:1.25; } #lb-overlay, #demo-overlay{ align-items:flex-start; padding:.75rem; overflow-y:auto; } #lb-panel, #demo-panel{ width:100%; max-height:none; margin:min(4vh,1.5rem) 0; padding:1.5rem; border-radius:18px; } .lb-header{ align-items:flex-start; padding-right:2rem; } .lb-title{ font-size:1.25rem; } .svc-item-logo{ max-width:150px; } .svc-item-desc, .svc-perk{ font-size:.78rem; } .cta-title{ max-width:10ch; } #cta .btn-primary, .demo-submit, .foot-demo{ width:100%; justify-content:center; } .foot-top{ gap:1.75rem; } .foot-actions, .foot-bottom nav{ width:100%; } } @media(max-width:380px){ .nav-cta{ padding:.45rem .65rem; } .ies-title, .cta-title{ font-size:2.45rem !important; } .hero-copy h1{ font-size:clamp(1.65rem,8.3vw,2.1rem) !important; } #ies .sol-card{ align-items:flex-start; } .svc-item-logo{ max-width:130px; } }