:root { --page:#fff; --ink:#000; --text:#171717; --muted:#5e5e5e; --soft:#6e6e73; --line:#171717; --mist:#d2d2d7; --wash:#e3eeff; --blue:#3b82f6; --blue2:#6ea5ff; --max:1200px; --radius:22px; --pill:9999px; --font:'Satoshi','Inter','General Sans','Switzer',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--page);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.4} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .container{width:min(var(--max),calc(100vw - 40px));margin:0 auto} .nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(16px)} .nav-inner{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0} .brand{display:flex;align-items:center;gap:14px;color:#000;flex-shrink:0} .brand-combined{width:300px;height:auto;display:block;flex-shrink:0} .brand-mark{width:42px;height:auto;flex-shrink:0} .brand-word{width:190px;height:auto;flex-shrink:0} .nav-links{display:flex;align-items:center;gap:24px;color:#171717;font-size:16px;font-weight:500} .nav-links a{opacity:.94} .nav-links a:hover{opacity:1;color:var(--blue)} .nav-cta{border:1px solid #171717;border-radius:var(--pill);padding:13px 22px;font-weight:700} .hero{padding:72px 0 42px;text-align:center;overflow:hidden} .hero-chip-rail{display:flex;justify-content:center;align-items:center;margin:0 auto 28px;width:100%} .hero-chip{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid rgba(23,23,23,.16);border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 24px rgba(11,18,32,.06), inset 0 1px 0 rgba(255,255,255,.78);color:#2d2d2d;font-size:clamp(14px,1.08vw,17px);font-weight:500;line-height:1;letter-spacing:-.018em} .hero-chip b{display:inline-block;width:10px;height:10px;border-radius:999px;background:linear-gradient(180deg,#7dafFF 0%, var(--blue) 100%);box-shadow:0 0 0 4px rgba(59,130,246,.10);flex:0 0 auto} h1{margin:0 auto;font-weight:800;font-size:clamp(64px,9vw,120px);line-height:.88;letter-spacing:-.064em;color:#000;max-width:1120px} .hero-sub{margin:28px auto 0;max-width:980px;font-size:clamp(18px,2.1vw,25px);line-height:1.25;letter-spacing:-.03em;color:var(--muted)} .actions{margin:36px auto 0;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--pill);padding:18px 32px;font-weight:700;font-size:18px;line-height:1;border:1px solid #171717;min-height:58px} .btn.primary{background:var(--blue);border-color:var(--blue);color:#fff} .btn.secondary{background:#fff;color:#171717} .hero-query{position:relative;margin:34px auto 10px;width:min(1120px,100%);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;padding:24px 24px 24px 34px;border:2.5px solid #171717;border-radius:18px;background:linear-gradient(180deg,#ffffff 0%,#f8f8fb 100%);box-shadow:0 22px 50px rgba(17,24,39,.10), 0 8px 20px rgba(17,24,39,.06);transform:rotate(-1.35deg);transform-origin:center center} .hero-query-copy{min-height:112px;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0;text-align:left} .query-eyebrow{display:inline-flex;align-items:center;gap:10px;color:#5f6b85;font-size:14px;font-weight:800;letter-spacing:.03em;text-transform:uppercase} .query-eyebrow:before{content:'';width:10px;height:10px;border-radius:999px;background:linear-gradient(180deg,#7dafFF 0%, var(--blue) 100%);box-shadow:0 0 0 6px rgba(59,130,246,.12)} .query-text{font-size:clamp(34px,4vw,56px);line-height:.95;letter-spacing:-.07em;color:#171717;font-weight:700} .hero-query-btn{display:inline-flex;align-items:center;justify-content:center;min-width:220px;min-height:116px;padding:22px 34px;border-radius:16px;background:linear-gradient(180deg,#4f8dff 0%, #3b82f6 100%);color:#fff;font-size:clamp(22px,2vw,30px);font-weight:800;line-height:1;white-space:nowrap;box-shadow:0 16px 32px rgba(59,130,246,.28)} .hero-query-btn:hover{background:linear-gradient(180deg,#4784f1 0%, #2f6fd6 100%)} .hero-stage{position:relative;margin:34px auto 0;width:min(1500px,calc(100vw - 24px));padding:0;display:block} .hero-stage:before{display:none} .hero-composite{display:block;width:100%;height:auto} .cases-strip{padding:8px 0 44px;overflow:hidden} .cases-ribbon{position:relative;left:50%;width:100vw;transform:translateX(-50%) rotate(-2.1deg);background:#050505;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.14)} .cases-marquee{overflow:hidden;padding:18px 0} .cases-track{display:flex;align-items:center;gap:42px;width:max-content;animation:caseRibbon 34s linear infinite;will-change:transform} .cases-track:hover{animation-play-state:paused} .case-item{flex:0 0 auto;display:inline-flex;align-items:center;gap:42px;color:#3b82f6;font-size:clamp(28px,2.25vw,44px);font-weight:700;line-height:1;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap} .case-item b{display:inline-flex;align-items:center;justify-content:center;color:#3b82f6;font-size:.9em;font-weight:700;transform:translateY(-1px)} @keyframes caseRibbon{from{transform:translateX(0)}to{transform:translateX(-50%)}} .after-features-strip{padding:12px 0 34px;overflow:hidden} .after-features-ribbon{position:relative;left:50%;width:100vw;transform:translateX(-50%) rotate(2.15deg);background:#050505;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.14)} .after-features-marquee{overflow:hidden;padding:18px 0} .after-features-track{display:flex;align-items:center;gap:42px;width:max-content;animation:featureRibbon 32s linear infinite;will-change:transform} .after-features-track:hover{animation-play-state:paused} .after-feature-item{flex:0 0 auto;display:inline-flex;align-items:center;gap:42px;color:#3b82f6;font-size:clamp(24px,2vw,38px);font-weight:700;line-height:1;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap} .after-feature-item b{display:inline-flex;align-items:center;justify-content:center;color:#3b82f6;font-size:.9em;font-weight:700;transform:translateY(-1px)} @keyframes featureRibbon{from{transform:translateX(-50%)}to{transform:translateX(0)}} .method-label,.kicker{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border:1px solid #cfd6e1;border-radius:999px;background:#fff;color:#4a4a4a;font-family:var(--font-satoshi);font-size:15px;font-weight:500;line-height:1;letter-spacing:-.018em;margin:0 0 24px;box-shadow:none} #method{padding-top:30px} section{padding:74px 0} .section-head{text-align:center;margin-bottom:42px} .kicker:before{content:none} h2{margin:0 auto;font-weight:800;font-size:clamp(48px,7vw,93px);line-height:.94;letter-spacing:-.058em;color:#000;max-width:1000px} .section-head p{margin:20px auto 0;max-width:760px;color:var(--muted);font-size:clamp(17px,2vw,21px);line-height:1.3;letter-spacing:-.03em} .formula{display:grid;grid-template-columns:1fr;gap:16px;margin-top:34px} .formula-line{border:1px solid #171717;border-radius:42px;padding:25px 30px;font-size:clamp(30px,4.8vw,64px);line-height:1;letter-spacing:-.055em;font-weight:800;color:#000;background:#fff;text-align:center} .formula-line span{color:var(--blue)} .method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px} .method-card{border:1px solid #171717;border-radius:22px;padding:24px;min-height:200px;background:#fff} .method-card b{display:block;font-size:48px;line-height:.9;letter-spacing:-.06em;margin-bottom:18px;color:#000} .method-card h3{font-size:22px;line-height:1.08;letter-spacing:-.04em;margin:0 0 12px;color:#000} .method-card p{margin:0;color:var(--muted);font-size:15px} .wash{background:var(--wash);border-top:1px solid #171717;border-bottom:1px solid #171717} .problem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch} .problem-card{border:1px solid #171717;border-radius:22px;padding:30px 34px;background:#fff;min-height:390px;display:flex} .problem-card > div{display:flex;flex-direction:column;height:100%;width:100%} .problem-card .num{font-size:82px;font-weight:800;line-height:.85;letter-spacing:-.07em;color:#000} .problem-card h3{margin:22px 0 16px;font-size:27px;line-height:1;letter-spacing:-.04em;color:#000;min-height:2.1em;display:flex;align-items:flex-start} .problem-card p{margin:0;color:var(--muted);font-size:16px;line-height:1.5;letter-spacing:-.01em;min-height:8.9em} .features.functionality-grid{display:grid;grid-template-columns:1fr;gap:34px} #features{padding-top:24px} .package-divider{display:flex;justify-content:center;align-items:center;margin:6px 0 10px} .package-label{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border:1px solid #cfd6e1;border-radius:999px;background:#fff;color:var(--blue);font-size:clamp(18px,1.8vw,30px);font-weight:800;line-height:1;letter-spacing:-.035em} .package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .feature-card.function-item{border:1px solid #171717;border-radius:18px;background:#fff;padding:24px;display:flex;flex-direction:column;gap:18px;min-height:100%;overflow:hidden} .function-visual{background:#f6f7fb;border:1px solid #dadde6;border-radius:18px;padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch;min-height:470px} .screen-shell{background:#eef1f7;border:1px solid #d7dbe6;border-radius:16px;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;padding:0;min-height:404px;box-shadow:none} .screen-shell img{width:100%;height:100%;object-fit:contain;object-position:center top;display:block} .function-visual.single-screen{grid-template-columns:1fr;min-height:470px} .function-visual.single-screen .screen-shell{max-width:320px;margin:0 auto;width:100%} .screen-shell.desktop img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain} .screen-shell.crop img{width:100%;height:100%;object-fit:cover;object-position:center top} .feature-copy h3{margin:0 0 10px;font-size:24px;line-height:1.02;letter-spacing:-.045em;color:#000} .feature-copy p{margin:0;color:var(--muted);font-size:15px;line-height:1.45;min-height:90px} .function-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .function-tags span{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 16px;border:1px solid #c7d4ff;border-radius:999px;background:#f8fbff;color:#2858d6;font-size:15px;font-weight:600;line-height:1;text-align:center;white-space:nowrap} .split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center} .big-copy h2{text-align:left;margin-left:0} .big-copy p{font-size:21px;line-height:1.3;color:var(--muted);letter-spacing:-.03em} .stack{display:grid;gap:12px} .pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .pill{border:1px solid #171717;border-radius:var(--pill);padding:10px 16px;background:#fff;font-weight:600;color:#171717} .visual-combo{position:relative;min-height:520px;border:1px solid #171717;border-radius:42px;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:28px} .visual-combo .phone{width:230px;filter:drop-shadow(0 18px 26px rgba(0,0,0,.12));position:relative;z-index:2} .visual-combo .phone.right{margin-left:-38px;transform:rotate(5deg)} .visual-combo .phone.left{transform:rotate(-5deg)} .visual-combo .wide-img{width:94%;border-radius:22px} .profile-visibility-split{grid-template-columns:minmax(520px,0.88fr) minmax(560px,1fr);gap:34px;align-items:center} .profile-visibility-split .visual-combo{min-height:520px;max-width:590px;justify-self:start;padding:24px 22px;border-radius:36px} .profile-visibility-split .visual-combo .wide-img{width:100%;max-width:560px;border-radius:18px;display:block} .profile-visibility-split .big-copy{max-width:720px} .role-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:stretch} .role-card{border:1px solid #171717;border-radius:22px;padding:24px 22px;background:#fff;min-height:310px;display:flex;flex-direction:column} .role-card h3{margin:0 0 20px;font-size:34px;letter-spacing:-.055em;line-height:.98;color:#000} .role-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.48;letter-spacing:-.01em;flex:1} .role-card a{display:inline-flex;align-items:center;gap:6px;margin-top:20px;color:var(--blue);font-weight:800;font-size:14px;line-height:1;white-space:nowrap;letter-spacing:-.015em;text-decoration:none} .numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .number-card{border:1px solid #171717;border-radius:22px;padding:24px;background:#fff;min-height:300px} .number-card strong{display:block;font-size:clamp(64px,8vw,104px);line-height:.85;letter-spacing:-.075em;color:#000} .number-card strong span{color:var(--blue)} .number-card p{margin:18px 0 0;color:var(--muted);font-size:16px} #packages .package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch} .package{border:1px solid #171717;border-radius:24px;padding:26px 30px 28px;background:#fff;display:flex;flex-direction:column;min-height:660px} .package.featured{background:var(--wash)} .package .tag{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 16px;border:1px solid #171717;border-radius:999px;font-weight:800;font-size:14px;letter-spacing:-.02em;background:#fff;color:#171717;line-height:1} .package.featured .tag{background:#fff} .package .price{font-size:clamp(32px,2.55vw,42px);line-height:.95;letter-spacing:-.06em;font-weight:900;color:#000;margin:18px 0 4px} .package .price-note{font-size:13px;line-height:1.25;color:var(--muted);margin-bottom:12px} .package h3{font-size:clamp(31px,2.5vw,40px);line-height:.95;letter-spacing:-.06em;margin:0 0 8px;color:#000;min-height:82px;display:flex;align-items:flex-end} .package .audience{font-size:18px;line-height:1.15;color:#000;font-weight:800;margin-bottom:12px;min-height:42px;display:flex;align-items:flex-start} .package p{color:var(--muted);font-size:16px;line-height:1.42;margin:0 0 16px;min-height:136px;text-wrap:pretty} .package ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px;color:#171717} .package li{padding-left:20px;position:relative;font-size:16px;line-height:1.3;text-wrap:pretty} .package li:before{content:'•';position:absolute;left:0;color:var(--blue);font-weight:800} .package .btn{margin-top:auto;align-self:flex-start;white-space:nowrap} .package .btn.primary,.package .btn.secondary{min-width:230px;justify-content:center} .ethics{border:1px solid #171717;border-radius:42px;padding:42px;background:#fff;display:grid;grid-template-columns:1fr 1.2fr;gap:32px;align-items:center} .ethics h2{text-align:left;font-size:clamp(46px,6vw,82px)} .ethics-list{display:grid;gap:12px} .ethics-item{border:1px solid #171717;border-radius:22px;padding:18px 20px;background:#fff} .ethics-item b{display:block;font-size:20px;letter-spacing:-.03em;color:#000;margin-bottom:6px} .ethics-item span{color:var(--muted)} .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .gallery-item{border:1px solid #171717;border-radius:8px;padding:12px;background:#fff;margin:0;display:flex;flex-direction:column;gap:12px;min-height:390px} .gallery-item.wide{grid-column:span 2} .gallery-item img{width:100%;height:300px;object-fit:contain;background:#f5f5f7;border-radius:8px;border:1px solid var(--mist)} .gallery-item.wide img{height:300px;object-fit:contain} figcaption strong{display:block;font-size:18px;line-height:1.05;letter-spacing:-.03em;color:#000} figcaption span{display:block;margin-top:6px;color:var(--muted);font-size:13px;line-height:1.3} .functionality-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .function-card{border:1px solid #171717;border-radius:8px;background:#fff;padding:18px;display:flex;flex-direction:column;gap:18px;min-height:0} .function-card .feature-copy{display:flex;flex-direction:column;gap:12px} .function-card .feature-copy h3{margin:0;font-size:30px;line-height:1.02;letter-spacing:-.055em;color:#000} .function-card .feature-copy p{margin:0;color:var(--muted);font-size:17px;line-height:1.48;letter-spacing:-.02em} .function-tags{display:flex;flex-wrap:nowrap;gap:8px;margin-top:4px;overflow:hidden} .function-tags span{display:inline-flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;min-height:38px;padding:0 10px;border-radius:999px;background:#f5f7ff;border:1px solid #dbe5ff;color:#3158d3;font-size:12px;font-weight:650;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tier-media{min-height:342px;padding:12px;background:#f5f5f7;border:1px solid var(--mist);border-radius:8px;display:flex;align-items:stretch} .tier-panel{width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:16px;border-radius:8px;background:linear-gradient(180deg,#ffffff 0%,#eef4ff 100%);border:1px solid #dbe5ff;padding:16px} .tier-badge{align-self:flex-start;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid #dbe5ff;color:#3158d3;font-size:13px;font-weight:700;letter-spacing:-.02em} .tier-lead{font-size:22px;line-height:1.08;letter-spacing:-.04em;color:#000;font-weight:700} .tier-microgrid{display:grid;grid-template-columns:1fr;gap:10px} .tier-tile{border:1px solid #dbe5ff;border-radius:8px;background:#fff;padding:14px 14px 12px;min-width:0} .tier-tile b{display:block;font-size:16px;line-height:1.08;letter-spacing:-.03em;color:#000;margin-bottom:6px} .tier-tile span{display:block;color:var(--muted);font-size:13px;line-height:1.3} .function-list{margin:0;padding-left:18px;display:grid;gap:8px;color:#171717} .function-list li{font-size:15px;line-height:1.4} .cta{padding:100px 0 120px;text-align:center} .cta-box{border:1px solid #171717;border-radius:42px;padding:64px 36px;background:#fff} .cta h2{font-size:clamp(58px,8vw,106px);max-width:1040px} .cta p{max-width:720px;margin:22px auto 0;color:var(--muted);font-size:21px;line-height:1.3;letter-spacing:-.03em} footer{border-top:1px solid #d7dce5;padding:34px 0 30px;color:var(--muted);font-size:14px;background:#f7f8fb} .footer-rich{display:grid;gap:28px} .footer-top{display:grid;grid-template-columns:.85fr .5fr 1.75fr;gap:44px;align-items:start} .footer-brand-title{font-size:18px;line-height:1.05;font-weight:900;color:#171717;letter-spacing:-.03em;margin:0 0 18px} .footer-brand-mark{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px} .footer-brand-icon{width:52px;height:52px;border-radius:12px;background:#171717;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;letter-spacing:-.04em} .footer-brand-copy{font-size:16px;line-height:1.15;font-weight:800;color:#171717} .footer-email{font-size:16px;line-height:1.4;color:var(--muted)} .footer-nav-title{font-size:18px;line-height:1.2;color:var(--muted);margin:0 0 20px} .footer-nav{display:grid;gap:14px} .footer-nav a{font-size:17px;line-height:1.25;color:#171717;text-decoration:none} .footer-nav a:hover{color:var(--blue)} .footer-badges{display:grid;grid-template-columns:repeat(2,minmax(190px,1fr));gap:16px} .footer-badge{border:1px solid #d7dce5;border-radius:18px;background:#fff;padding:16px 18px;min-height:94px;display:flex;flex-direction:column;justify-content:center} .footer-badge-title{font-size:18px;line-height:1.08;font-weight:800;color:#6b7280;letter-spacing:-.03em;margin-bottom:8px} .footer-badge-sub{font-size:14px;line-height:1.35;color:#7a8599} .footer-divider{height:1px;background:#d7dce5} .footer-bottom{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start} .footer-links{display:flex;flex-wrap:wrap;gap:18px 34px} .footer-links a{font-size:16px;line-height:1.35;color:var(--muted);text-decoration:none} .footer-links a:hover{color:var(--blue)} .footer-copy{font-size:16px;line-height:1.45;color:var(--muted);justify-self:end;max-width:720px} .footer-copy span{display:block}.footer-copy span+span{margin-top:8px} .footer-inner{display:block} .floating{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;background:#171717;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;z-index:60} @media (max-width: 1040px){ .method-grid,.numbers{grid-template-columns:repeat(2,1fr)} .features,.problem-grid,.package-grid{grid-template-columns:1fr 1fr} .functionality-grid{grid-template-columns:repeat(2,1fr)} .role-grid{grid-template-columns:repeat(2,1fr)} .role-card{min-height:260px} .split,.ethics{grid-template-columns:1fr} .profile-visibility-split{grid-template-columns:1fr;gap:24px} .profile-visibility-split .visual-combo{max-width:none;min-height:auto;padding:18px} .brand-word{width:170px} .nav-links{gap:18px;font-size:15px} .badge{padding:16px 22px} .hero-stage{width:min(100%,1320px);margin-top:24px} .gallery{grid-template-columns:repeat(2,1fr)} .case-item{min-height:52px;padding:0 20px} } @media (max-width: 720px){ .nav-links{display:none} .container{width:min(100% - 24px, var(--max))} .nav-inner{min-height:auto;padding:14px 0;flex-wrap:wrap;justify-content:center} .brand{justify-content:center;width:100%} .brand-mark{width:34px} .brand-word{width:156px} .nav-links{gap:12px;justify-content:center;flex-wrap:wrap;font-size:14px} .nav-cta{padding:11px 16px} .hero{padding-top:40px} .hero-chip-rail{gap:10px;margin-bottom:24px} .hero-chip{min-height:42px;padding:0 14px;font-size:13px} .hero-query{margin-top:22px;grid-template-columns:1fr;align-items:stretch;gap:16px;padding:18px 18px 18px 20px;border-radius:18px;transform:none} .hero-query-copy{min-height:auto;padding:4px 2px;text-align:left;align-items:flex-start} .query-eyebrow{font-size:12px} .query-text{font-size:32px;line-height:.96} .hero-query-btn{width:100%;min-width:0;min-height:72px;padding:18px 24px;border-radius:14px;font-size:24px} .hero-stage{width:100%;margin-top:18px} .features,.problem-grid,.package-grid,.method-grid,.numbers,.role-grid,.gallery,.functionality-grid{grid-template-columns:1fr} .function-card .feature-copy h3{font-size:26px} .function-card .feature-copy p{font-size:15px} .function-tags{gap:6px} .function-tags span{font-size:11px;padding:0 8px;min-height:36px} .tier-media{min-height:280px} .tier-lead{font-size:18px} .cases-strip{padding:14px 0 24px} .case-item{min-height:48px;padding:0 16px;font-size:16px} .method-label,.kicker{min-height:40px;padding:0 16px;font-size:14px;margin-bottom:18px} #method{padding-top:24px} .gallery-item.wide{grid-column:auto} .visual-combo{min-height:auto} .visual-combo .phone{width:48%} section{padding:48px 0} .problem-card,.package{min-height:auto} .footer-top{grid-template-columns:1fr;gap:28px} .footer-badges{grid-template-columns:1fr} .footer-bottom{grid-template-columns:1fr;gap:20px} .footer-copy{justify-self:start;max-width:none} .footer-links{gap:14px 24px} .footer-inner{display:block} } @media (max-width: 1100px){ .package-grid{grid-template-columns:1fr 1fr} .feature-copy p{min-height:auto} } @media (max-width: 760px){ .package-grid{grid-template-columns:1fr} .function-visual{grid-template-columns:1fr 1fr;min-height:auto} .screen-shell{min-height:300px} .screen-shell img,.screen-shell.desktop img,.screen-shell.crop img{width:100%;height:100%;object-fit:contain;max-height:none} .package-label{font-size:22px;padding:0 24px} } .ai-shell{position:relative;padding:22px;border:1px solid #171717;border-radius:34px;background:linear-gradient(180deg,#fbfcff 0%,#f6f8fc 100%);box-shadow:0 18px 48px rgba(17,24,39,.10)} .ai-panel{position:relative;background:#fff;border:1px solid #e4e7ee;border-radius:28px;padding:0;box-shadow:0 10px 26px rgba(17,24,39,.08), inset 0 1px 0 rgba(255,255,255,.92);overflow:hidden} .ai-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid #eceff5;background:linear-gradient(180deg,#ffffff 0%,#f8faff 100%)} .ai-panel-title{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;color:#171717} .ai-signal{width:40px;height:40px;border-radius:12px;border:1px solid #dfe6f3;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(59,130,246,.08)} .ai-signal svg{width:20px;height:20px;stroke:#3b82f6;fill:none;stroke-width:2} .ai-panel-actions{display:flex;align-items:center;gap:16px;color:#5c6a84;font-size:30px;line-height:1} .ai-panel-body{padding:18px 18px 164px;max-height:900px;overflow:auto;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)} .ai-label{font-size:14px;font-weight:700;color:#3b82f6;margin:4px 0 8px} .ai-question-title{font-size:clamp(30px,2.3vw,42px);line-height:1.03;letter-spacing:-.045em;margin:0 0 12px;color:#171717;font-weight:800} .ai-lead{font-size:15px;line-height:1.5;color:#69748a;margin:0 0 18px} .ai-group{margin:18px 0 22px} .ai-group h4{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#707d95} .ai-card{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid #e4e7ee;border-radius:16px;background:#fff;color:#2d3445;font-size:15px;line-height:1.45;font-family:var(--font);text-align:left;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;margin-bottom:10px;box-shadow:0 4px 10px rgba(17,24,39,.04)} .ai-card:hover{transform:translateY(-1px);border-color:#cfd7e7;box-shadow:0 10px 22px rgba(17,24,39,.08)} .ai-card.active{border-color:#bfd1ff;background:#f7faff;box-shadow:0 12px 24px rgba(59,130,246,.10)} .ai-arrow{font-size:24px;line-height:1;color:#3b82f6;flex:0 0 auto} .ai-footer{position:absolute;left:18px;right:18px;bottom:18px;background:#fff;border:1px solid #e2e6ef;border-radius:18px;box-shadow:0 16px 32px rgba(17,24,39,.10);padding:12px 14px 14px} .ai-answer-box{min-height:88px;padding:2px 2px 12px;color:#263041} .ai-answer-kicker{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7b87a0;margin-bottom:8px} .ai-answer-title{font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:#171717;margin:0 0 8px} .ai-answer-text{font-size:14px;line-height:1.55;color:#5d687e;margin:0} .ai-input-row{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid #edf1f6} .ai-attach{font-size:20px;color:#7a8599;line-height:1} .ai-input{flex:1;border:none;outline:none;font:500 15px/1.2 var(--font);color:#171717;background:transparent} .ai-enter{font-size:12px;color:#7f8aa0;white-space:nowrap} .ai-send{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:12px;padding:12px 16px;background:linear-gradient(180deg,#4d8eff 0%,#3176ef 100%);color:#fff;font:700 14px/1 var(--font);cursor:pointer;box-shadow:0 10px 20px rgba(59,130,246,.22)} .ai-send:hover{filter:brightness(.98)} @media (max-width:980px){.ai-shell{padding:14px;border-radius:26px}.ai-panel-body{padding-bottom:186px}.ai-question-title{font-size:28px}} /* v44 — функциональные карточки как в референсе: экраны крупно, без пустых внутренних рамок */ .functionality-grid .package-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:stretch; } .functionality-grid .feature-card.function-item{ padding:18px 22px 22px; border-radius:24px; min-height:650px; display:flex; flex-direction:column; overflow:visible; } .functionality-grid .function-visual{ background:transparent; border:0; border-radius:0; padding:0; margin:-10px -12px 18px; min-height:0; height:380px; display:flex; grid-template-columns:none; gap:8px; align-items:flex-start; justify-content:center; overflow:visible; box-shadow:none; } .functionality-grid .screen-shell{ background:transparent; border:0; border-radius:0; padding:0; min-height:0; height:380px; flex:1 1 0; display:flex; align-items:flex-start; justify-content:center; overflow:visible; box-shadow:none; } .functionality-grid .screen-shell img{ width:auto; height:100%; max-width:112%; max-height:none; object-fit:contain; object-position:center top; display:block; filter:drop-shadow(0 10px 20px rgba(0,0,0,.12)); } .functionality-grid .function-visual.single-screen{ display:flex; height:380px; min-height:0; } .functionality-grid .function-visual.single-screen .screen-shell{ max-width:none; width:100%; } .functionality-grid .function-visual.single-screen .screen-shell img{ height:100%; max-width:100%; } .functionality-grid .feature-copy{ margin-top:0; display:flex; flex-direction:column; flex:1; } .functionality-grid .feature-copy h3{ font-size:32px; line-height:1.02; letter-spacing:-1.2px; margin:0 0 14px; } .functionality-grid .feature-copy p{ font-size:20px; line-height:1.36; color:#5e5e5e; margin:0 0 18px; } .functionality-grid .feature-tags{ margin-top:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .functionality-grid .tag{ min-width:0; justify-content:center; white-space:nowrap; font-size:15px; padding:12px 10px; border-radius:9999px; } @media (max-width: 980px){ .functionality-grid .package-grid{grid-template-columns:1fr} .functionality-grid .feature-card.function-item{min-height:auto} .functionality-grid .function-visual{height:360px} .functionality-grid .screen-shell{height:360px} } @media (max-width: 640px){ .functionality-grid .function-visual{height:300px; gap:4px} .functionality-grid .screen-shell{height:300px} .functionality-grid .feature-copy h3{font-size:26px} .functionality-grid .feature-copy p{font-size:17px} .functionality-grid .feature-tags{grid-template-columns:1fr} } .profile-carousel-box { display: flex; align-items: center; justify-content: center; } .profile-carousel { position: relative; width: calc(100% - 24px); height: calc(100% - 24px); min-height: 520px; margin: 12px; border-radius: 28px; overflow: hidden; background: #ffffff; } .profile-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.015); transition: opacity .55s ease, transform .8s ease; display: flex; align-items: center; justify-content: center; background: #ffffff; } .profile-slide.is-active { opacity: 1; transform: scale(1); z-index: 1; } .profile-slide img { width: 100%; height: 100%; object-fit: contain; display: block; background: #ffffff; } @media (max-width: 1100px) { .profile-carousel { min-height: 420px; } } /* ---- v46-function-card-symmetry ---- */ .functionality-grid .feature-card.function-item{ min-height: 660px; display: flex; flex-direction: column; } .functionality-grid .function-visual{ height: 370px; margin-bottom: 20px; flex: 0 0 auto; } .functionality-grid .screen-shell{ height: 370px; } .functionality-grid .feature-copy{ flex: 1 1 auto; display: grid; grid-template-rows: minmax(66px, auto) minmax(170px, 1fr) auto; align-content: stretch; } .functionality-grid .feature-copy h3{ margin: 0 0 12px; min-height: 66px; display: flex; align-items: flex-end; font-size: 32px; line-height: 1.02; letter-spacing: -1.2px; } .functionality-grid .feature-copy p{ margin: 0; min-height: 170px; color: #5e5e5e; font-size: 20px; line-height: 1.36; letter-spacing: -0.02em; } .functionality-grid .function-tags{ margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-self: end; } .functionality-grid .function-tags span{ min-width: 0; min-height: 46px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d7e2ff; border-radius: 9999px; background: #f7faff; color: #2858d6; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 980px){ .functionality-grid .feature-card.function-item{min-height:auto} .functionality-grid .feature-copy{display:flex;flex-direction:column} .functionality-grid .feature-copy h3, .functionality-grid .feature-copy p{min-height:auto} } /* ---- v47-function-card-compact-spacing ---- */ /* v47 — уменьшаем воздух между экранами, текстом и тегами */ .functionality-grid .feature-card.function-item{ min-height: 590px !important; padding-bottom: 22px !important; } .functionality-grid .function-visual{ height: 335px !important; margin-bottom: 8px !important; } .functionality-grid .screen-shell{ height: 335px !important; } .functionality-grid .feature-copy{ display: grid !important; grid-template-rows: auto minmax(128px, 1fr) auto !important; align-content: stretch !important; } .functionality-grid .feature-copy h3{ min-height: auto !important; margin: 0 0 10px !important; align-items: flex-start !important; } .functionality-grid .feature-copy p{ min-height: 128px !important; margin: 0 !important; } .functionality-grid .function-tags{ margin-top: 8px !important; } @media (max-width: 980px){ .functionality-grid .feature-card.function-item{min-height:auto !important} .functionality-grid .function-visual{height:320px !important} .functionality-grid .screen-shell{height:320px !important} .functionality-grid .feature-copy{display:flex !important;flex-direction:column !important} .functionality-grid .feature-copy p{min-height:auto !important} } /* ---- v47-intelligence-block-user-assets ---- */ .functionality-grid .package-grid.intelligence-grid{gap:26px;align-items:stretch;} .functionality-grid .feature-card.function-item.intelligence-card{min-height:620px !important;padding:22px 26px 26px !important;border-radius:28px !important;overflow:hidden !important;} .functionality-grid .intelligence-card .function-visual{height:330px !important;margin:0 0 8px !important;display:flex !important;gap:12px !important;align-items:flex-start !important;justify-content:center !important;overflow:visible !important;} .functionality-grid .intelligence-card .function-visual.dual-desktop-phone .screen-shell.desktop-shell{flex:1.28 1 0;height:330px !important;} .functionality-grid .intelligence-card .function-visual.dual-desktop-phone .screen-shell.phone-shell{flex:0.88 1 0;height:330px !important;} .functionality-grid .intelligence-card .function-visual.single-desktop .screen-shell{flex:1 1 0;height:330px !important;} .functionality-grid .intelligence-card .function-visual.dual-phone-pair .screen-shell{flex:1 1 0;height:330px !important;} .functionality-grid .intelligence-card .screen-shell{background:transparent !important;border:0 !important;padding:0 !important;border-radius:0 !important;box-shadow:none !important;overflow:visible !important;display:flex !important;align-items:flex-start !important;justify-content:center !important;} .functionality-grid .intelligence-card .screen-shell img{width:auto !important;height:100% !important;max-width:100% !important;max-height:none !important;object-fit:contain !important;object-position:center top !important;filter:none !important;display:block !important;} .functionality-grid .intelligence-card .screen-shell.desktop-shell img{width:100% !important;height:auto !important;max-height:100% !important;} .functionality-grid .intelligence-card .feature-copy{display:grid !important;grid-template-rows:auto minmax(124px,auto) auto !important;gap:0 !important;flex:1 1 auto !important;} .functionality-grid .intelligence-card .feature-copy h3{font-size:28px !important;line-height:1.03 !important;letter-spacing:-1px !important;margin:0 0 8px !important;color:#0b0b0b !important;} .functionality-grid .intelligence-card .feature-copy p{font-size:20px !important;line-height:1.34 !important;letter-spacing:-0.02em !important;color:#555 !important;min-height:124px !important;margin:0 !important;} .functionality-grid .intelligence-card .function-tags{margin-top:8px !important;display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:12px !important;} .functionality-grid .intelligence-card .function-tags span{min-height:50px !important;font-size:15px !important;padding:0 14px !important;} @media (max-width: 980px){ .functionality-grid .package-grid.intelligence-grid{grid-template-columns:1fr !important;} .functionality-grid .feature-card.function-item.intelligence-card{min-height:auto !important;} } @media (max-width: 640px){ .functionality-grid .intelligence-card .function-visual, .functionality-grid .intelligence-card .function-visual.dual-desktop-phone, .functionality-grid .intelligence-card .function-visual.dual-phone-pair{height:auto !important;flex-direction:column !important;align-items:center !important;} .functionality-grid .intelligence-card .function-visual .screen-shell{height:300px !important;} .functionality-grid .intelligence-card .feature-copy{display:flex !important;flex-direction:column !important;} .functionality-grid .intelligence-card .feature-copy p{min-height:auto !important;font-size:17px !important;} .functionality-grid .intelligence-card .function-tags{grid-template-columns:1fr !important;} } /* ---- v47-tags-one-row-style ---- */ .functionality-grid .function-tags, .functionality-grid .intelligence-card .function-tags{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-start !important; align-content:center !important; width:100% !important; max-width:100% !important; gap:10px !important; margin-top:8px !important; overflow:hidden !important; grid-template-columns:none !important; } .functionality-grid .function-tags span, .functionality-grid .intelligence-card .function-tags span{ flex:0 1 auto !important; width:auto !important; min-width:0 !important; max-width:none !important; height:50px !important; min-height:50px !important; padding:0 18px !important; box-sizing:border-box !important; border-radius:999px !important; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:15px !important; line-height:1 !important; letter-spacing:-0.01em !important; } /* ---- v47-corporate-block-final ---- */ .functionality-grid .feature-package.corporate-package{ margin-top: 28px !important; } .functionality-grid .corporate-grid{ gap: 26px !important; align-items: stretch !important; } .functionality-grid .feature-card.function-item.corporate-card{ min-height: 620px !important; padding: 22px 26px 26px !important; border-radius: 28px !important; overflow: hidden !important; display: grid !important; grid-template-rows: 330px auto auto auto !important; gap: 0 !important; } .functionality-grid .corporate-card .function-visual{ height: 330px !important; min-height: 330px !important; margin: 0 0 8px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; gap: 12px !important; overflow: visible !important; } .functionality-grid .corporate-card .screen-shell{ background: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; } .functionality-grid .corporate-card .screen-shell img{ display: block !important; width: auto !important; height: 100% !important; max-width: 100% !important; object-fit: contain !important; object-position: center top !important; filter: none !important; } .functionality-grid .corporate-card .function-visual.single-wide .screen-shell{ width: 100% !important; height: 270px !important; align-items: center !important; } .functionality-grid .corporate-card .function-visual.single-wide .screen-shell img{ width: 100% !important; height: auto !important; max-height: 270px !important; object-fit: contain !important; object-position: center center !important; } .functionality-grid .corporate-card .function-visual.dual-phone .screen-shell{ flex: 0 1 48% !important; height: 330px !important; } .functionality-grid .corporate-card .feature-copy{ display: contents !important; } .functionality-grid .corporate-card .feature-copy h3{ font-size: 28px !important; line-height: 1.03 !important; letter-spacing: -1px !important; margin: 0 0 8px !important; color: #0b0b0b !important; } .functionality-grid .corporate-card .feature-copy p{ font-size: 20px !important; line-height: 1.34 !important; letter-spacing: -0.02em !important; color: #555 !important; min-height: 124px !important; margin: 0 !important; } .functionality-grid .corporate-card .function-tags{ margin-top: 8px !important; } @media (max-width: 980px){ .functionality-grid .feature-card.function-item.corporate-card{ min-height: auto !important; grid-template-rows: auto auto auto auto !important; } .functionality-grid .corporate-card .function-visual{ height: 300px !important; min-height: 300px !important; } .functionality-grid .corporate-card .function-visual.dual-phone .screen-shell{ height: 300px !important; } } /* ---- v47-ai-corporate-polish ---- */ #ai-panel-komma .ai-panel-title span{white-space:nowrap;} #ai-panel-komma .ai-lead{max-width:100%;} #ai-panel-komma .ai-card span:first-child{display:block;min-width:0;} #ai-panel-komma .ai-answer-title{line-height:1.2;} #ai-panel-komma .ai-input{min-width:0;} /* ---- v47-heading-stretch-and-phone ---- */ h1{ letter-spacing: -0.048em !important; } h2, .big-copy h2, .ethics h2, .cta-box h2{ letter-spacing: -0.040em !important; } .query-text, .formula-line{ letter-spacing: -0.044em !important; } .role-card h3, .ethics-item b, .functionality-grid h3, .package-card h3, .feature-card h3{ letter-spacing: -0.034em !important; } /* ---- v47-query-plaque-smaller ---- */ .hero-query{ width: min(1040px, 100%) !important; gap: 18px !important; padding: 20px 20px 20px 28px !important; border-width: 2px !important; border-radius: 16px !important; } .hero-query-copy{ min-height: 92px !important; gap: 8px !important; } .query-eyebrow{ font-size: 13px !important; gap: 9px !important; } .query-eyebrow:before{ width: 9px !important; height: 9px !important; box-shadow: 0 0 0 5px rgba(59,130,246,.12) !important; } .query-text{ font-size: clamp(30px, 3.45vw, 48px) !important; line-height: .96 !important; } .hero-query-btn{ min-width: 190px !important; min-height: 96px !important; padding: 18px 30px !important; border-radius: 15px !important; font-size: clamp(20px, 1.8vw, 27px) !important; } @media (max-width: 820px){ .hero-query{ grid-template-columns: 1fr !important; width: min(620px, 100%) !important; } .hero-query-btn{ min-height: 62px !important; width: 100% !important; } } /* ---- v47-title-company-sees-fit ---- */ .hero .hero-title-company-sees{ max-width: min(1120px, calc(100vw - 48px)) !important; margin-left: auto !important; margin-right: auto !important; font-size: clamp(58px, 6.15vw, 92px) !important; line-height: .94 !important; letter-spacing: -0.046em !important; text-align: center !important; overflow: visible !important; } .hero .hero-title-company-sees span{ display: block !important; white-space: nowrap !important; } @media (max-width: 980px){ .hero .hero-title-company-sees{ max-width: calc(100vw - 32px) !important; font-size: clamp(40px, 8.6vw, 62px) !important; letter-spacing: -0.044em !important; } .hero .hero-title-company-sees span{ white-space: normal !important; } } /* ---- v47-hero-exact-original-image ---- */ .hero-stage.hero-stage-exact{ width: min(1280px, calc(100vw - 24px)) !important; margin: 20px auto 0 !important; padding: 0 !important; display: block !important; overflow: visible !important; line-height: 0 !important; } .hero-stage.hero-stage-exact::before{ display: none !important; } .hero-stage.hero-stage-exact .hero-exact-image{ display: block !important; width: 100% !important; height: auto !important; max-width: 1280px !important; margin: 0 auto !important; object-fit: contain !important; object-position: center center !important; image-rendering: auto !important; transform: none !important; filter: none !important; } @media (max-width: 820px){ .hero-stage.hero-stage-exact{ width: min(100%, calc(100vw - 16px)) !important; margin-top: 12px !important; } } /* ---- v47-hero-fit-no-crop ---- */ .hero{ overflow: visible !important; } .hero-stage.hero-stage-exact{ width: min(1120px, calc(100vw - 96px)) !important; max-width: calc(100vw - 96px) !important; margin: 22px auto 0 !important; padding: 0 !important; display: block !important; overflow: visible !important; line-height: 0 !important; box-sizing: border-box !important; } .hero-stage.hero-stage-exact::before{ display: none !important; } .hero-stage.hero-stage-exact .hero-exact-image{ display: block !important; width: 100% !important; max-width: 1120px !important; height: auto !important; margin: 0 auto !important; object-fit: contain !important; object-position: center center !important; transform: none !important; filter: none !important; image-rendering: auto !important; } @media (max-width: 980px){ .hero-stage.hero-stage-exact{ width: min(100%, calc(100vw - 56px)) !important; max-width: calc(100vw - 56px) !important; margin-top: 20px !important; } } @media (max-width: 640px){ .hero-stage.hero-stage-exact{ width: min(100%, calc(100vw - 28px)) !important; max-width: calc(100vw - 28px) !important; margin-top: 16px !important; } } /* ---- v47-hero-transparent-bg ---- */ .hero-stage.hero-stage-exact{ background: transparent !important; } .hero-stage.hero-stage-exact .hero-exact-image{ background: transparent !important; } /* ---- v47-query-pure-white ---- */ .hero-query{ background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; box-shadow: 0 18px 36px rgba(0,0,0,.06) !important; } .hero-query-btn{ background: linear-gradient(180deg,#4f8dff 0%, #3b82f6 100%) !important; color: #ffffff !important; background-color: #3b82f6 !important; background-image: linear-gradient(180deg,#4f8dff 0%, #3b82f6 100%) !important; box-shadow: 0 16px 32px rgba(59,130,246,.28) !important; } .hero-query-btn:hover{ background: linear-gradient(180deg,#4784f1 0%, #2f6fd6 100%) !important; background-image: linear-gradient(180deg,#4784f1 0%, #2f6fd6 100%) !important; } /* ---- v47-ai-tags-functional ---- */ .ai-analytics-section .ai-pills{ display:flex !important; flex-wrap:wrap !important; gap:12px !important; align-items:center !important; margin-top:24px !important; max-width:640px !important; overflow:visible !important; } .ai-analytics-section .ai-pills .pill, .pill-row .pill{ display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important; min-width:auto !important; min-height:42px !important; height:auto !important; padding:0 18px !important; border:1px solid #171717 !important; border-radius:999px !important; background:#ffffff !important; color:#171717 !important; font:700 14px/1 var(--font) !important; letter-spacing:-.015em !important; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; cursor:pointer !important; transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease; } .ai-analytics-section .ai-pills .pill:hover{ transform:translateY(-1px); border-color:#3b82f6 !important; color:#235fe6 !important; } .ai-analytics-section .ai-pills .pill.active{ background:#171717 !important; color:#ffffff !important; border-color:#171717 !important; } .ai-visual.visual-combo{ overflow:visible !important; } .ai-card{ position:relative; } .ai-card.is-thinking{ border-color:#3b82f6 !important; background:#f3f7ff !important; } .ai-card.is-thinking .ai-arrow{ animation:aiPulseArrow .7s ease-in-out infinite alternate; } .ai-answer-box{ transition:background .18s ease,border-color .18s ease; } .ai-answer-box.is-thinking{ background:#f7faff; border-radius:12px; } .ai-answer-text.is-typing::after{ content:'|'; display:inline-block; margin-left:2px; color:#3b82f6; animation:aiCursor .8s steps(2,start) infinite; } .ai-input{ cursor:text; } @keyframes aiCursor{ 0%,45%{opacity:1} 46%,100%{opacity:0} } @keyframes aiPulseArrow{ from{transform:translateX(0);opacity:.55} to{transform:translateX(5px);opacity:1} } @media (max-width:720px){ .ai-analytics-section .ai-pills{ gap:8px !important; } .ai-analytics-section .ai-pills .pill, .pill-row .pill{ min-height:38px !important; padding:0 14px !important; font-size:13px !important; } } /* ---- v47-effects-marquee ---- */ .effects-marquee-section{ width:100%; overflow:hidden; margin:-22px 0 88px; padding:36px 0 18px; } .effects-marquee{ width:116%; margin-left:-8%; background:#050505; border-top:1px solid #171717; border-bottom:1px solid #171717; transform:rotate(-1.8deg); overflow:hidden; box-shadow:0 22px 38px rgba(0,0,0,.08); } .effects-marquee-track{ display:flex; width:max-content; align-items:center; gap:34px; padding:18px 0; animation:effectsMarqueeMove 28s linear infinite; will-change:transform; } .effects-marquee span{ display:inline-flex; align-items:center; color:#3b82f6; font:700 clamp(28px,2.25vw,44px)/1 var(--font); letter-spacing:-.03em; text-transform:uppercase; white-space:nowrap; } .effects-marquee .star{ color:#3b82f6; font-size:.9em; line-height:1; transform:translateY(-1px); } @keyframes effectsMarqueeMove{ from{transform:translateX(0)} to{transform:translateX(-50%)} } @media (max-width:720px){ .effects-marquee-section{ margin:-10px 0 56px; padding:24px 0 12px; } .effects-marquee{ width:132%; margin-left:-16%; transform:rotate(-2.4deg); } .effects-marquee-track{ gap:22px; padding:14px 0; animation-duration:22s; } .effects-marquee span{font-size:16px} } /* ---- v47-basic-package-video-layout ---- */ .feature-package.basic-package-two-column{margin-bottom:0;} .functionality-package-stack{ display:flex; flex-direction:column; gap:34px; } .basic-package-shell.reverse .basic-package-copy{order:2;} .basic-package-shell.reverse .basic-package-video-side{order:1;} .basic-package-shell{ border:1px solid #171717; border-radius:30px; background:#fff; display:grid; grid-template-columns:minmax(320px,0.92fr) minmax(360px,1.08fr); gap:30px; padding:34px; align-items:stretch; } .basic-package-copy{ display:flex; flex-direction:column; gap:28px; min-width:0; } .basic-package-title{ margin:0; font-size:54px; line-height:0.98; letter-spacing:-0.06em; color:#4f8dff; } .basic-package-list{ display:flex; flex-direction:column; gap:24px; } .basic-package-item{ padding-bottom:24px; border-bottom:1px solid #e7e8ee; } .basic-package-item:last-child{ padding-bottom:0; border-bottom:0; } .basic-package-item h3{ margin:0 0 10px; font-size:34px; line-height:1.02; letter-spacing:-0.055em; color:#000; } .basic-package-item p{ margin:0; color:#5e5e5e; font-size:20px; line-height:1.42; letter-spacing:-0.02em; } .basic-package-tags{ margin-top:16px; display:flex; flex-wrap:nowrap; gap:10px; overflow:hidden; } .basic-package-tag{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:999px; border:1px solid #cfe0ff; background:#eef4ff; color:#4f8dff; font-size:16px; line-height:1; font-weight:600; letter-spacing:-0.02em; white-space:nowrap; flex:0 0 auto; } .basic-package-video-side{ display:flex; align-items:center; justify-content:center; min-width:0; } .basic-package-video-shell{ width:100%; min-height:100%; border:1px solid #171717; border-radius:30px; background:#f6f7fb; padding:24px; display:flex; align-items:center; justify-content:center; } .basic-package-video-frame{ position:relative; width:min(100%,460px); aspect-ratio:9 / 16; border-radius:36px; overflow:hidden; background:#fff; border:1px solid #dce2f0; box-shadow:0 24px 60px rgba(12,20,40,.08); } .basic-package-video-frame video{ width:100%; height:100%; display:block; object-fit:cover; background:#fff; } .basic-package-video-frame::before{ content:''; position:absolute; inset:0; border-radius:36px; pointer-events:none; } @media (max-width: 1180px){ .basic-package-shell{grid-template-columns:1fr;gap:26px;padding:28px;} .basic-package-shell.reverse .basic-package-copy{order:1;} .basic-package-shell.reverse .basic-package-video-side{order:2;} .basic-package-title{font-size:48px;} .basic-package-item h3{font-size:30px;} .basic-package-item p{font-size:19px;} .basic-package-tags{gap:8px;} .basic-package-tag{font-size:14px;padding:9px 14px;} .basic-package-video-shell{padding:20px;} .basic-package-video-frame{max-width:420px;} } @media (max-width: 640px){ .basic-package-shell{padding:22px;border-radius:24px;} .basic-package-title{font-size:40px;} .basic-package-item h3{font-size:26px;} .basic-package-item p{font-size:17px;} .basic-package-tags{flex-wrap:wrap;} .basic-package-tag{font-size:13px;padding:8px 12px;} .basic-package-video-shell{padding:14px;border-radius:24px;} .basic-package-video-frame{border-radius:28px;} } /* ---- v47-intellectual-tags-fix ---- */ .basic-package-shell.reverse .basic-package-tags{ gap:8px; overflow:visible; } .basic-package-shell.reverse .basic-package-tag{ padding:9px 13px; font-size:14px; } /* ---- v47-footer-cert-image ---- */ .footer-cert-image{ width:100%; display:flex; align-items:flex-start; justify-content:flex-start; } .footer-cert-image img{ display:block; width:min(100%,756px); height:auto; object-fit:contain; object-position:left center; border:0; border-radius:0; box-shadow:none; background:transparent; image-rendering:auto; } @media (max-width:1040px){ .footer-cert-image img{width:min(100%,756px);} } /* ---- v47-profile-carousel-uploaded-fix ---- */ .profile-visibility-split{ grid-template-columns:minmax(620px,0.95fr) minmax(560px,1fr); gap:34px; align-items:center; } .profile-visibility-split .visual-combo.profile-carousel-box{ width:100%; max-width:none; min-height:auto; padding:14px; border-radius:36px; } .profile-carousel{ width:100%; height:auto; min-height:0; aspect-ratio: 1672 / 941; margin:0; border-radius:28px; overflow:hidden; background:#fff; } .profile-slide img{ width:100%; height:100%; object-fit:contain; object-position:center; background:#fff; } @media (max-width:1100px){ .profile-visibility-split{grid-template-columns:1fr;} .profile-visibility-split .visual-combo.profile-carousel-box{ max-width:none; min-height:auto; } .profile-carousel{ min-height:0; aspect-ratio: 1672 / 941; } } /* ---- v47-hero-phones-updated-no-crop ---- */ .hero, .hero .container{ overflow: visible !important; } .hero-stage.hero-stage-exact{ width: min(1320px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; margin: 24px auto 0 !important; padding: 0 !important; display: block !important; overflow: visible !important; line-height: 0 !important; box-sizing: border-box !important; background: transparent !important; } .hero-stage.hero-stage-exact::before{ display: none !important; } .hero-stage.hero-stage-exact .hero-exact-image{ display: block !important; width: 100% !important; max-width: 1320px !important; height: auto !important; margin: 0 auto !important; object-fit: contain !important; object-position: center center !important; transform: none !important; filter: none !important; background: transparent !important; image-rendering: auto !important; } @media (max-width: 980px){ .hero-stage.hero-stage-exact{ width: min(100%, calc(100vw - 20px)) !important; max-width: calc(100vw - 20px) !important; } } /* ---- v47-profile-centered-carousel-layout ---- */ .profile-centered-section{ padding-top:72px; padding-bottom:72px; } .profile-centered-wrap{ display:flex; flex-direction:column; align-items:center; gap:28px; } .profile-centered-head{ text-align:center; max-width:1080px; margin:0 auto 4px; } .profile-centered-head .kicker{ margin:0 auto 28px; } .profile-centered-head h2{ margin:0; text-align:center; max-width:1100px; font-size:clamp(64px,8vw,128px); line-height:.88; letter-spacing:-.075em; } .profile-centered-section .visual-combo.profile-carousel-box{ width:100%; max-width:1280px; min-height:auto; justify-self:center; padding:18px; border-radius:42px; border:1px solid #171717; background:#fff; } .profile-centered-section .profile-carousel{ width:100%; height:auto; min-height:0; aspect-ratio:1672 / 941; margin:0; border-radius:30px; overflow:hidden; background:#fff; } .profile-centered-section .profile-slide img{ width:100%; height:100%; object-fit:contain; object-position:center; background:#fff; } .profile-centered-copy{ max-width:980px; margin:0 auto; text-align:center; } .profile-centered-copy p{ margin:0; color:var(--muted); font-size:24px; line-height:1.32; letter-spacing:-.035em; } .profile-centered-copy .pill-row{ justify-content:center; margin-top:26px; } @media (max-width:980px){ .profile-centered-section{padding-top:54px;padding-bottom:54px} .profile-centered-head h2{font-size:clamp(48px,13vw,76px)} .profile-centered-section .visual-combo.profile-carousel-box{padding:12px;border-radius:30px} .profile-centered-section .profile-carousel{border-radius:22px} .profile-centered-copy p{font-size:20px} } /* ---- v47-hero-image-format-fit-final ---- */ .hero.container{ overflow: visible !important; } .hero-stage.hero-stage-exact{ width: 100% !important; max-width: var(--max) !important; margin: 22px auto 0 !important; padding: 0 !important; display: block !important; overflow: visible !important; line-height: 0 !important; box-sizing: border-box !important; background: transparent !important; } .hero-stage.hero-stage-exact .hero-exact-image{ display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; object-fit: contain !important; object-position: center center !important; transform: none !important; filter: none !important; background: transparent !important; image-rendering: auto !important; } @media (max-width: 980px){ .hero-stage.hero-stage-exact{ width: 100% !important; max-width: 100% !important; } } /* ---- v47-profile-title-box-fit-final ---- */ .profile-centered-head{ max-width: 1360px !important; margin-bottom: 0 !important; } .profile-centered-head h2{ max-width: 1360px !important; font-size: clamp(46px, 5.35vw, 88px) !important; line-height: .93 !important; letter-spacing: -0.045em !important; word-spacing: 0.01em !important; } .profile-centered-head .title-line{ display: block; } .profile-centered-head .title-line.top, .profile-centered-head .title-line.bottom{ white-space: nowrap; } .profile-centered-head .title-line.bottom{ margin-top: 8px; } .profile-centered-section .visual-combo.profile-carousel-box{ max-width: 1000px !important; padding: 14px !important; border-radius: 34px !important; } .profile-centered-section .profile-carousel{ border-radius: 24px !important; } @media (max-width: 980px){ .profile-centered-head h2{ font-size: clamp(38px, 9vw, 64px) !important; line-height: .95 !important; letter-spacing: -0.035em !important; } .profile-centered-head .title-line.top, .profile-centered-head .title-line.bottom{ white-space: normal; } .profile-centered-head .title-line.bottom{ margin-top: 6px; } .profile-centered-section .visual-combo.profile-carousel-box{ max-width: 100% !important; padding: 12px !important; } } /* ---- v47-footer-profile-icon-fix ---- */ .footer-brand-icon.footer-brand-icon-image{ background:transparent !important; border-radius:12px !important; overflow:hidden !important; width:52px !important; height:52px !important; box-shadow:none !important; } .footer-brand-icon.footer-brand-icon-image img{ width:100% !important; height:100% !important; object-fit:contain !important; display:block !important; } /* ---- logo-nav-replace-fix ---- */ @media (max-width: 860px){ .brand-combined{width:230px !important;} } @media (max-width: 560px){ .brand-combined{width:190px !important;} } /* ---- v47-final-business-logo-fix ---- */ .brand{display:flex !important;align-items:center !important;gap:0 !important;flex-shrink:0 !important;line-height:0 !important;} .brand-combined{display:block !important;width:330px !important;height:auto !important;max-height:86px !important;object-fit:contain !important;object-position:left center !important;flex-shrink:0 !important;background:transparent !important;} @media (max-width: 980px){.brand-combined{width:270px !important;max-height:76px !important;}} @media (max-width: 640px){.brand-combined{width:210px !important;max-height:62px !important;}} /* ---- v47-logo-smaller-final ---- */ .brand-combined{ width:260px !important; max-height:68px !important; height:auto !important; object-fit:contain !important; object-position:left center !important; } @media (max-width:980px){ .brand-combined{width:220px !important;max-height:62px !important;} } @media (max-width:640px){ .brand-combined{width:180px !important;max-height:52px !important;} } /* ---- v47-footer-no-k-artifact ---- */ footer .footer-brand-mark{ gap:0 !important; align-items:flex-start !important; } footer .footer-brand-copy{ font-size:18px !important; line-height:1.08 !important; } /* ---- v47-footer-clean-final ---- */ footer .footer-email{display:none !important;} footer .footer-cert-image{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important; display:flex !important; align-items:flex-start !important; justify-content:flex-start !important; } footer .footer-cert-image img{ background:transparent !important; border:none !important; box-shadow:none !important; border-radius:0 !important; width:min(100%,760px) !important; height:auto !important; object-fit:contain !important; display:block !important; } /* ---- v47-footer-cert-clean-adjust ---- */ footer .footer-cert-image{ background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; } footer .footer-cert-image img{ display: block !important; width: min(100%, 465px) !important; height: auto !important; background: transparent !important; border: none !important; box-shadow: none !important; object-fit: contain !important; } /* ---- production overrides ---- */ img { max-width: 100%; } video { max-width: 100%; } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } } /* ---- mobile-ready-v1 final overrides ---- */ html, body { overflow-x: hidden; } * { box-sizing: border-box; } img, video, svg { max-width: 100%; height: auto; } .mobile-menu-toggle { display: none; } @media (max-width: 1180px){ .container{width:min(calc(100vw - 32px), var(--max));} .nav-inner{gap:16px;} h1{font-size:clamp(56px,9.2vw,104px);} .hero-sub{max-width:860px;} } @media (max-width: 920px){ body.mobile-nav-open{overflow:hidden;} .nav{border-bottom:1px solid rgba(23,23,23,.08);} .nav-inner{ min-height:72px !important; padding:10px 0 !important; flex-wrap:nowrap !important; justify-content:space-between !important; position:relative !important; } .brand{width:auto !important;justify-content:flex-start !important;line-height:0 !important;} .brand-combined{width:210px !important;max-height:58px !important;} .mobile-menu-toggle{ display:inline-flex !important; width:46px;height:46px; border:1px solid #171717; border-radius:999px; background:#fff; align-items:center; justify-content:center; flex-direction:column; gap:5px; cursor:pointer; padding:0; flex:0 0 auto; z-index:90; } .mobile-menu-toggle span{ display:block; width:18px;height:2px; border-radius:999px; background:#171717; transition:transform .18s ease, opacity .18s ease; } body.mobile-nav-open .mobile-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);} body.mobile-nav-open .mobile-menu-toggle span:nth-child(2){opacity:0;} body.mobile-nav-open .mobile-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .nav-links{ display:flex !important; position:absolute !important; left:0;right:0;top:calc(100% + 10px); flex-direction:column !important; align-items:stretch !important; gap:4px !important; padding:10px !important; border:1px solid #171717; border-radius:24px; background:rgba(255,255,255,.98); box-shadow:0 22px 50px rgba(17,24,39,.14); opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none; z-index:80; } body.mobile-nav-open .nav-links{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; } .nav-links a{ display:flex !important; min-height:48px; align-items:center; justify-content:center; padding:12px 16px; border-radius:16px; color:#171717; font-size:17px; text-decoration:none; background:#fff; } .nav-links a:not(.nav-cta){border:1px solid #e7e8ee;} .nav-links .nav-cta{ border:1px solid #171717 !important; margin-top:4px; background:#171717; color:#fff; } } @media (max-width: 760px){ .container{width:min(calc(100vw - 24px), var(--max)) !important;} section{padding:52px 0 !important;} .section-head{margin-bottom:28px !important;} h2{font-size:clamp(40px,12vw,58px) !important;line-height:.94 !important;letter-spacing:-.055em !important;max-width:100% !important;} .section-head p, .big-copy p{font-size:18px !important;line-height:1.36 !important;letter-spacing:-.025em !important;} .method-label,.kicker{min-height:38px !important;padding:0 16px !important;font-size:13px !important;margin-bottom:18px !important;} .hero.container{padding-top:30px !important;padding-bottom:28px !important;overflow:visible !important;} .hero-chip-rail{margin-bottom:22px !important;} .hero-chip{min-height:38px !important;padding:0 15px !important;font-size:12px !important;line-height:1.15 !important;white-space:normal !important;} .hero-title-company-sees, .hero h1{ font-size:clamp(42px,13.5vw,58px) !important; line-height:.92 !important; letter-spacing:-.056em !important; max-width:390px !important; } .hero-title-company-sees span{display:block;} .hero-sub{ margin-top:18px !important; max-width:100% !important; font-size:17px !important; line-height:1.34 !important; letter-spacing:-.025em !important; } .actions{margin-top:22px !important;display:flex !important;flex-direction:column !important;gap:10px !important;width:100% !important;} .actions .btn{width:100% !important;max-width:390px !important;margin:0 auto !important;min-height:50px !important;padding:14px 18px !important;font-size:15px !important;} .hero-query{ margin:24px auto 12px !important; grid-template-columns:1fr !important; gap:12px !important; padding:16px !important; border-width:1.5px !important; border-radius:18px !important; transform:rotate(-1deg) !important; } .hero-query-copy{min-height:auto !important;padding:2px 0 !important;} .query-eyebrow{font-size:11px !important;gap:8px !important;} .query-eyebrow:before{width:8px !important;height:8px !important;box-shadow:0 0 0 4px rgba(59,130,246,.12) !important;} .query-text{font-size:clamp(25px,8.8vw,34px) !important;line-height:.98 !important;letter-spacing:-.055em !important;} .hero-query-btn{width:100% !important;min-height:48px !important;padding:14px 18px !important;border-radius:14px !important;font-size:17px !important;} .hero-stage.hero-stage-exact{width:100% !important;max-width:100% !important;margin-top:18px !important;overflow:visible !important;} .hero-stage.hero-stage-exact .hero-exact-image{width:100% !important;max-width:100% !important;object-fit:contain !important;} .cases-strip{padding:12px 0 22px !important;} .cases-marquee{padding:12px 0 !important;} .cases-track{gap:22px !important;animation-duration:26s !important;} .case-item{font-size:16px !important;gap:22px !important;} .method-grid,.problem-grid,.package-grid,.role-grid,.numbers, #packages .package-grid,.features.functionality-grid,.functionality-grid{ grid-template-columns:1fr !important; gap:16px !important; } .method-card,.problem-card,.role-card,.number-card,.package,.feature-card.function-item{ min-height:auto !important; border-radius:22px !important; padding:22px !important; } .method-card b,.problem-card .num{font-size:56px !important;} .method-card h3,.problem-card h3,.role-card h3{font-size:27px !important;min-height:auto !important;} .problem-card p{min-height:auto !important;font-size:16px !important;} .formula-line{border-radius:28px !important;padding:20px !important;font-size:clamp(28px,10vw,42px) !important;line-height:1.04 !important;} .function-visual{grid-template-columns:1fr !important;min-height:auto !important;padding:12px !important;} .screen-shell{min-height:auto !important;max-height:none !important;} .screen-shell img{height:auto !important;max-height:none !important;object-fit:contain !important;} .function-visual.single-screen .screen-shell{max-width:100% !important;} .feature-copy h3{font-size:25px !important;} .feature-copy p{font-size:17px !important;line-height:1.36 !important;} .split, .split.ai-analytics-layout, .ethics, .profile-visibility-split{ grid-template-columns:1fr !important; gap:22px !important; } .big-copy h2{text-align:left !important;} .ai-analytics-section .big-copy h2{font-size:clamp(42px,12vw,58px) !important;} .ai-visual.visual-combo{border-radius:28px !important;padding:12px !important;min-height:auto !important;overflow:hidden !important;} .ai-shell{padding:10px !important;border-radius:24px !important;width:100% !important;} .ai-panel{border-radius:22px !important;} .ai-panel-head{padding:14px !important;} .ai-panel-body{padding:14px 14px 128px !important;max-height:640px !important;} .ai-question-title{font-size:30px !important;} .ai-lead{font-size:14px !important;} .ai-card{padding:14px !important;font-size:14px !important;border-radius:14px !important;} .ai-input-row{left:12px !important;right:12px !important;bottom:12px !important;} .ai-input{font-size:14px !important;} .ai-send{min-width:96px !important;padding:0 14px !important;font-size:14px !important;} .ai-pills{max-width:100% !important;gap:8px !important;} .ai-pills .pill,.pill-row .pill{font-size:13px !important;min-height:36px !important;padding:0 12px !important;} .effects-marquee-section{margin:-8px 0 46px !important;padding:20px 0 10px !important;} .effects-marquee{width:134% !important;margin-left:-17% !important;} .effects-marquee-track{gap:20px !important;padding:12px 0 !important;} .effects-marquee span{font-size:16px !important;} .profile-centered-section{padding-top:48px !important;padding-bottom:48px !important;} .profile-centered-wrap{gap:20px !important;} .profile-centered-head .kicker{margin-bottom:18px !important;} .profile-centered-head h2{font-size:clamp(36px,10.8vw,52px) !important;line-height:.96 !important;letter-spacing:-.038em !important;} .profile-centered-head .title-line{display:block !important;white-space:normal !important;} .profile-centered-section .visual-combo.profile-carousel-box{padding:8px !important;border-radius:24px !important;max-width:100% !important;} .profile-centered-section .profile-carousel{border-radius:18px !important;} .profile-centered-copy{max-width:100% !important;} .profile-centered-copy p{font-size:17px !important;line-height:1.34 !important;text-align:left !important;} .profile-centered-copy .pill-row{justify-content:flex-start !important;gap:8px !important;} .basic-package-shell{grid-template-columns:1fr !important;padding:20px !important;border-radius:24px !important;gap:22px !important;} .basic-package-shell.reverse .basic-package-copy{order:1 !important;} .basic-package-shell.reverse .basic-package-video-side{order:2 !important;} .basic-package-title{font-size:clamp(34px,10vw,44px) !important;line-height:1 !important;} .basic-package-copy{gap:22px !important;} .basic-package-list{gap:20px !important;} .basic-package-item{padding-bottom:20px !important;} .basic-package-item h3{font-size:26px !important;} .basic-package-item p{font-size:16px !important;line-height:1.4 !important;} .basic-package-tags{flex-wrap:wrap !important;gap:8px !important;overflow:visible !important;} .basic-package-tag{font-size:13px !important;padding:8px 11px !important;} .basic-package-video-shell{padding:12px !important;border-radius:22px !important;min-height:auto !important;} .basic-package-video-frame{width:min(100%,330px) !important;border-radius:28px !important;} .package{min-height:auto !important;padding:24px !important;} .package h3{min-height:auto !important;font-size:34px !important;align-items:flex-start !important;} .package .audience{min-height:auto !important;} .package p{min-height:auto !important;} .package .price{font-size:38px !important;} .package .btn{width:100% !important;} .cta-box{padding:36px 18px !important;border-radius:28px !important;} .cta h2{font-size:clamp(42px,13vw,58px) !important;} .cta p{font-size:18px !important;} footer{padding:30px 0 26px !important;} .footer-top{grid-template-columns:1fr !important;gap:26px !important;} .footer-nav{gap:10px !important;} .footer-nav a{font-size:16px !important;} .footer-cert-image{justify-content:flex-start !important;width:100% !important;overflow:visible !important;} footer .footer-cert-image img{width:100% !important;max-width:520px !important;height:auto !important;} .footer-bottom{grid-template-columns:1fr !important;gap:18px !important;} .footer-links{display:grid !important;gap:10px !important;} .footer-copy{font-size:14px !important;justify-self:start !important;} .floating{display:none !important;} } @media (max-width: 430px){ .container{width:min(calc(100vw - 20px), var(--max)) !important;} .brand-combined{width:174px !important;max-height:50px !important;} .mobile-menu-toggle{width:42px;height:42px;} .hero-title-company-sees,.hero h1{font-size:clamp(38px,13.1vw,52px) !important;} .hero-sub{font-size:16px !important;} .query-text{font-size:28px !important;} h2{font-size:clamp(36px,12vw,52px) !important;} .method-card,.problem-card,.role-card,.number-card,.package,.feature-card.function-item{padding:20px !important;} .profile-centered-head h2{font-size:clamp(34px,10.3vw,46px) !important;} .basic-package-video-frame{width:min(100%,300px) !important;} } /* ---- v49-rendering-polish ---- */ html{ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img{ image-rendering:auto; } .hero-stage.hero-stage-exact .hero-exact-image{ aspect-ratio:3072 / 1714; } /* ---- mobile sticky section rail v2 ---- */ .mobile-section-rail{display:none;} @media (max-width: 920px){ html{scroll-padding-top:128px;} .mobile-section-rail{ display:block; position:sticky; top:72px; z-index:49; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-bottom:1px solid rgba(23,23,23,.08); box-shadow:0 10px 26px rgba(17,24,39,.06); } .mobile-section-rail-inner{ width:min(var(--max),calc(100vw - 24px)); margin:0 auto; display:flex; align-items:center; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; padding:9px 0 10px; scrollbar-width:none; } .mobile-section-rail-inner::-webkit-scrollbar{display:none;} .mobile-section-rail a{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:8px 13px; border-radius:999px; border:1px solid rgba(59,130,246,.24); background:#eef5ff; color:#246bec; font-size:13px; font-weight:750; line-height:1; letter-spacing:-.02em; white-space:nowrap; } .mobile-section-rail a.is-active{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 6px 16px rgba(59,130,246,.20); } body.mobile-nav-open .mobile-section-rail{ z-index:40; } } @media (max-width: 430px){ html{scroll-padding-top:120px;} .mobile-section-rail{top:68px;} .mobile-section-rail-inner{ width:calc(100vw - 20px); gap:7px; padding:8px 0 9px; } .mobile-section-rail a{ min-height:32px; padding:7px 11px; font-size:12px; } } /* ---- animation + transition layer v3 ---- */ :root{ --motion-fast: .18s; --motion-med: .42s; --motion-slow: .78s; --ease-out: cubic-bezier(.16,1,.3,1); --ease-soft: cubic-bezier(.22,.61,.36,1); } html{scroll-behavior:smooth;} .nav{ transition:box-shadow var(--motion-med) var(--ease-out), background var(--motion-med) var(--ease-out), border-color var(--motion-med) var(--ease-out); } .nav.is-scrolled{ background:rgba(255,255,255,.94); box-shadow:0 12px 34px rgba(17,24,39,.08); } .btn, .nav-cta, .hero-query-btn, .package .btn, .basic-package-tag, .pill, .mobile-section-rail a, .ai-card, .ai-filter, .feature-card, .problem-card, .method-card, .role-card, .number-card, .package{ transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out); } @media (hover:hover){ .btn:hover, .nav-cta:hover, .hero-query-btn:hover, .package .btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(17,24,39,.12); } .method-card:hover, .problem-card:hover, .role-card:hover, .number-card:hover, .feature-card:hover, .package:hover{ transform:translateY(-4px); box-shadow:0 18px 46px rgba(17,24,39,.10); } .pill:hover, .basic-package-tag:hover, .mobile-section-rail a:hover{ transform:translateY(-1px); } } .hero-chip{ animation:heroFadeDown .72s var(--ease-out) both .04s; } .hero-title-company-sees span{ display:block; animation:heroTitleIn .86s var(--ease-out) both; } .hero-title-company-sees span:nth-child(1){animation-delay:.12s;} .hero-title-company-sees span:nth-child(2){animation-delay:.23s;} .hero-sub{ animation:fadeUp .78s var(--ease-out) both .34s; } .hero .actions{ animation:fadeUp .72s var(--ease-out) both .44s; } .hero-query{ animation:fadeUp .76s var(--ease-out) both .54s; } .hero-stage-exact{ animation:phonesIn .92s var(--ease-out) both .64s; } .profile-slide{ transition:opacity .72s var(--ease-soft), transform 1.05s var(--ease-out), filter .72s var(--ease-out); filter:saturate(.96) contrast(.98); } .profile-slide.is-active{ filter:saturate(1) contrast(1); } .reveal-ready{ opacity:0; transform:translateY(32px); transition:opacity .72s var(--ease-out), transform .72s var(--ease-out); will-change:opacity, transform; } .reveal-ready.is-visible{ opacity:1; transform:translateY(0); } .reveal-ready[data-reveal="left"]{transform:translateX(-34px);} .reveal-ready[data-reveal="right"]{transform:translateX(34px);} .reveal-ready[data-reveal="scale"]{transform:scale(.965);} .reveal-ready[data-reveal="left"].is-visible, .reveal-ready[data-reveal="right"].is-visible{ transform:translateX(0); } .reveal-ready[data-reveal="scale"].is-visible{ transform:scale(1); } .reveal-stagger > *{ opacity:0; transform:translateY(22px); transition:opacity .62s var(--ease-out), transform .62s var(--ease-out); } .reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); } .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.04s;} .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.10s;} .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.16s;} .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.22s;} .reveal-stagger.is-visible > *:nth-child(5){transition-delay:.28s;} .reveal-stagger.is-visible > *:nth-child(6){transition-delay:.34s;} .basic-package-video-frame video{ transition:transform .85s var(--ease-out), filter .85s var(--ease-out); } @media (hover:hover){ .basic-package-video-shell:hover video{ transform:scale(1.018); filter:saturate(1.04) contrast(1.02); } } .marquee-track, .logo-marquee-track{ will-change:transform; } @keyframes heroFadeDown{ from{opacity:0;transform:translateY(-12px) scale(.98);} to{opacity:1;transform:translateY(0) scale(1);} } @keyframes heroTitleIn{ from{opacity:0;transform:translateY(30px);letter-spacing:-.09em;} to{opacity:1;transform:translateY(0);letter-spacing:inherit;} } @keyframes fadeUp{ from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} } @keyframes phonesIn{ from{opacity:0;transform:translateY(38px) scale(.985);} to{opacity:1;transform:translateY(0) scale(1);} } @media (max-width:920px){ .reveal-ready{ transform:translateY(20px); transition-duration:.58s; } .hero-stage-exact{ animation-duration:.74s; } } @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } .reveal-ready, .reveal-stagger > *{ opacity:1 !important; transform:none !important; } } /* ---- mobile fixed top section rail v4 ---- */ @media (max-width: 920px){ html{ scroll-padding-top:144px !important; } body{ --mobile-nav-height:72px; --mobile-rail-height:54px; } .nav{ position:sticky !important; top:0 !important; z-index:120 !important; } .mobile-section-rail{ display:block !important; position:fixed !important; left:0 !important; right:0 !important; top:var(--mobile-nav-height) !important; z-index:110 !important; background:rgba(255,255,255,.96) !important; -webkit-backdrop-filter:blur(18px) !important; backdrop-filter:blur(18px) !important; border-bottom:1px solid rgba(23,23,23,.10) !important; box-shadow:0 12px 30px rgba(17,24,39,.08) !important; transform:translateZ(0); } .mobile-section-rail-inner{ width:min(var(--max),calc(100vw - 24px)) !important; min-height:var(--mobile-rail-height); margin:0 auto !important; display:flex !important; align-items:center !important; gap:8px !important; overflow-x:auto !important; overscroll-behavior-x:contain !important; -webkit-overflow-scrolling:touch !important; padding:9px 0 10px !important; scrollbar-width:none !important; } .mobile-section-rail-inner::-webkit-scrollbar{ display:none !important; } .mobile-section-rail a{ flex:0 0 auto !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:34px !important; padding:8px 13px !important; border-radius:999px !important; border:1px solid rgba(59,130,246,.24) !important; background:#eef5ff !important; color:#246bec !important; font-size:13px !important; font-weight:750 !important; line-height:1 !important; letter-spacing:-.02em !important; white-space:nowrap !important; } .mobile-section-rail a.is-active{ background:var(--blue) !important; border-color:var(--blue) !important; color:#fff !important; box-shadow:0 6px 16px rgba(59,130,246,.20) !important; } main#top{ padding-top:var(--mobile-rail-height) !important; } body.mobile-nav-open .mobile-section-rail{ opacity:.18; pointer-events:none; } } @media (max-width: 430px){ html{ scroll-padding-top:132px !important; } body{ --mobile-nav-height:68px; --mobile-rail-height:50px; } .mobile-section-rail{ top:var(--mobile-nav-height) !important; } .mobile-section-rail-inner{ width:calc(100vw - 20px) !important; min-height:var(--mobile-rail-height); gap:7px !important; padding:8px 0 9px !important; } .mobile-section-rail a{ min-height:32px !important; padding:7px 11px !important; font-size:12px !important; } } /* ---- mobile fixed header only v5 ---- */ @media (max-width: 920px){ html{ scroll-padding-top:92px !important; } body{ --mobile-nav-height:72px; } .mobile-section-rail{ display:none !important; } .nav{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; z-index:150 !important; background:rgba(255,255,255,.96) !important; -webkit-backdrop-filter:blur(18px) !important; backdrop-filter:blur(18px) !important; border-bottom:1px solid rgba(23,23,23,.10) !important; box-shadow:0 10px 28px rgba(17,24,39,.08) !important; } .nav-inner{ min-height:var(--mobile-nav-height) !important; } main#top{ padding-top:var(--mobile-nav-height) !important; } .nav-links{ position:fixed !important; left:12px !important; right:12px !important; top:calc(var(--mobile-nav-height) + 10px) !important; z-index:140 !important; max-height:calc(100vh - var(--mobile-nav-height) - 24px); overflow-y:auto; } body.mobile-nav-open .nav{ box-shadow:0 16px 40px rgba(17,24,39,.13) !important; } } @media (max-width: 430px){ html{ scroll-padding-top:84px !important; } body{ --mobile-nav-height:68px; } main#top{ padding-top:var(--mobile-nav-height) !important; } .nav-links{ left:10px !important; right:10px !important; top:calc(var(--mobile-nav-height) + 8px) !important; } } /* ---- KOMMA responsive final v1: 1440 canvas / fluid across all devices ---- */ :root{ --design-canvas:1440px; --container-main:1200px; --container-wide:1320px; --container-text:920px; --side-gap:clamp(20px,4vw,72px); --section-y:clamp(64px,8vw,128px); --section-y-compact:clamp(44px,6vw,88px); --h1-fluid:clamp(58px,8.7vw,128px); --h2-fluid:clamp(48px,7.2vw,108px); --h3-fluid:clamp(30px,3.9vw,56px); --body-fluid:clamp(17px,1.45vw,22px); --card-radius:clamp(22px,2.2vw,36px); } html{ overflow-x:hidden !important; scroll-padding-top:108px; -webkit-text-size-adjust:100%; } body{ overflow-x:hidden !important; min-width:320px; } *,*::before,*::after{ box-sizing:border-box; } img,video,svg,canvas{ max-width:100%; } img,video{ height:auto; } .container{ width:min(var(--container-main), calc(100vw - var(--side-gap))) !important; max-width:min(var(--container-main), calc(100vw - var(--side-gap))) !important; margin-left:auto !important; margin-right:auto !important; } section{ padding-top:var(--section-y) !important; padding-bottom:var(--section-y) !important; } .section-head{ max-width:var(--container-text); margin-left:auto !important; margin-right:auto !important; } .section-head h2, h2{ font-size:var(--h2-fluid) !important; line-height:.94 !important; letter-spacing:-.065em !important; } .section-head p, .hero-sub, .cta p, .profile-centered-copy p{ font-size:var(--body-fluid) !important; line-height:1.34 !important; letter-spacing:-.028em !important; } .nav{ width:100%; } .nav-inner{ width:100%; } .brand-combined{ width:clamp(220px,23vw,300px) !important; height:auto !important; } .nav-links{ gap:clamp(14px,1.6vw,24px) !important; } .nav-links a{ font-size:clamp(14px,1.1vw,16px) !important; white-space:nowrap; } .nav-cta{ padding:clamp(10px,1vw,13px) clamp(16px,1.6vw,22px) !important; } .hero{ padding-top:clamp(56px,7vw,92px) !important; padding-bottom:clamp(34px,5vw,72px) !important; } .hero-title-company-sees, .hero h1{ font-size:var(--h1-fluid) !important; line-height:.9 !important; letter-spacing:-.078em !important; max-width:min(1160px, calc(100vw - var(--side-gap))) !important; margin-left:auto !important; margin-right:auto !important; } .hero-title-company-sees span{ display:block !important; } .hero-sub{ max-width:min(980px, calc(100vw - var(--side-gap))) !important; margin-left:auto !important; margin-right:auto !important; } .actions{ flex-wrap:wrap !important; justify-content:center !important; gap:12px !important; } .btn{ min-height:48px; } .hero-query{ width:min(760px, calc(100vw - var(--side-gap))) !important; margin-left:auto !important; margin-right:auto !important; } .hero-stage.hero-stage-exact{ width:min(var(--container-wide), calc(100vw - clamp(16px,3vw,48px))) !important; max-width:min(var(--container-wide), calc(100vw - clamp(16px,3vw,48px))) !important; margin-left:auto !important; margin-right:auto !important; overflow:visible !important; } .hero-stage.hero-stage-exact .hero-exact-image{ width:100% !important; max-width:var(--container-wide) !important; height:auto !important; object-fit:contain !important; object-position:center !important; } .cards, .problem-grid, .role-grid, .number-grid, .package-grid, .packages{ display:grid !important; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important; gap:clamp(16px,2vw,28px) !important; } .method-card, .problem-card, .role-card, .number-card, .feature-card, .package{ min-width:0 !important; border-radius:var(--card-radius) !important; } .method-card h3, .problem-card h3, .role-card h3, .number-card h3, .feature-card h3, .package h3{ overflow-wrap:break-word; } .ai-layout, .split, .feature-split, .profile-visibility-split{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:clamp(24px,3.5vw,52px) !important; align-items:center !important; } .basic-package-shell{ width:100% !important; grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr) !important; gap:clamp(22px,3vw,40px) !important; padding:clamp(24px,3vw,40px) !important; border-radius:clamp(26px,2.4vw,34px) !important; } .basic-package-title{ font-size:clamp(40px,4.2vw,58px) !important; } .basic-package-item h3{ font-size:clamp(25px,2.6vw,36px) !important; } .basic-package-item p{ font-size:clamp(17px,1.5vw,21px) !important; } .basic-package-tags{ flex-wrap:wrap !important; overflow:visible !important; } .basic-package-video-shell{ max-width:100% !important; } .basic-package-video-frame{ width:min(100%,360px) !important; margin-left:auto !important; margin-right:auto !important; aspect-ratio:9/16 !important; overflow:hidden !important; } .basic-package-video-frame video{ width:100% !important; height:100% !important; object-fit:cover !important; } .profile-centered-head{ max-width:min(1100px, calc(100vw - var(--side-gap))) !important; } .profile-centered-head h2{ font-size:clamp(52px,8.5vw,126px) !important; line-height:.88 !important; } .profile-centered-section .visual-combo.profile-carousel-box{ width:min(var(--container-wide), calc(100vw - var(--side-gap))) !important; max-width:min(var(--container-wide), calc(100vw - var(--side-gap))) !important; margin-left:auto !important; margin-right:auto !important; } .profile-centered-section .profile-carousel{ aspect-ratio:1672/941 !important; } .profile-centered-section .profile-slide img{ object-fit:contain !important; } .footer-top{ grid-template-columns:minmax(190px,.85fr) minmax(150px,.5fr) minmax(420px,1.75fr) !important; gap:clamp(24px,4vw,52px) !important; } .footer-cert-image, .footer-cert-image img{ max-width:100% !important; } .footer-bottom{ gap:clamp(18px,3vw,32px) !important; } /* 1440 design comfort */ @media (min-width:1440px){ .container{ width:var(--container-main) !important; max-width:var(--container-main) !important; } .hero-stage.hero-stage-exact, .profile-centered-section .visual-combo.profile-carousel-box{ width:var(--container-wide) !important; max-width:var(--container-wide) !important; } } /* Standard laptops: 1280–1439 */ @media (max-width:1439px){ :root{ --container-main:1180px; --container-wide:1280px; --side-gap:clamp(24px,3.4vw,56px); } .hero-title-company-sees, .hero h1{ font-size:clamp(56px,8.2vw,112px) !important; } } /* Compact laptops */ @media (max-width:1279px){ :root{ --container-main:1088px; --container-wide:1160px; --side-gap:clamp(22px,3.2vw,44px); } .nav-links{ gap:14px !important; } .nav-links a{ font-size:14px !important; } .brand-combined{ width:clamp(210px,20vw,260px) !important; } .basic-package-shell{ grid-template-columns:minmax(0,1fr) minmax(320px,.92fr) !important; } } /* Tablet landscape / small laptops */ @media (max-width:1099px){ :root{ --container-main:960px; --container-wide:1024px; --side-gap:clamp(20px,3vw,36px); --section-y:clamp(58px,7vw,94px); } .nav-links{ gap:10px !important; } .nav-links a{ font-size:13px !important; } .nav-cta{ padding:10px 14px !important; } .ai-layout, .split, .feature-split, .profile-visibility-split, .basic-package-shell, .basic-package-shell.reverse{ grid-template-columns:1fr !important; } .basic-package-shell.reverse .basic-package-copy, .basic-package-shell.reverse .basic-package-video-side{ order:initial !important; } .basic-package-video-frame{ width:min(100%,340px) !important; } .footer-top{ grid-template-columns:1fr 1fr !important; } .footer-top > *:last-child{ grid-column:1 / -1; } } /* Tablet portrait + mobile navigation */ @media (max-width:920px){ :root{ --container-main:100%; --container-wide:100%; --container-text:100%; --side-gap:24px; --section-y:clamp(50px,8vw,76px); --h1-fluid:clamp(44px,10vw,82px); --h2-fluid:clamp(40px,9vw,72px); --body-fluid:clamp(16px,4vw,19px); } html{ scroll-padding-top:92px !important; } .container{ width:calc(100vw - var(--side-gap)) !important; max-width:calc(100vw - var(--side-gap)) !important; } .nav{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; z-index:150 !important; } .nav-inner{ min-height:72px !important; padding:10px 0 !important; } main#top{ padding-top:72px !important; } .brand-combined{ width:min(210px,62vw) !important; max-height:58px !important; } .mobile-menu-toggle{ flex:0 0 auto !important; } .nav-links{ position:fixed !important; left:12px !important; right:12px !important; top:82px !important; max-height:calc(100vh - 96px) !important; overflow-y:auto !important; gap:6px !important; } .hero{ padding-top:clamp(38px,8vw,58px) !important; padding-bottom:clamp(28px,6vw,46px) !important; } .hero-chip{ max-width:100%; min-height:42px; padding:0 16px !important; font-size:14px !important; } .hero-title-company-sees, .hero h1{ max-width:calc(100vw - var(--side-gap)) !important; font-size:var(--h1-fluid) !important; line-height:.94 !important; letter-spacing:-.064em !important; } .hero-title-company-sees span{ white-space:normal !important; } .hero-sub{ max-width:calc(100vw - var(--side-gap)) !important; } .actions{ flex-direction:column !important; align-items:stretch !important; width:100% !important; max-width:420px !important; margin-left:auto !important; margin-right:auto !important; } .actions .btn{ width:100% !important; justify-content:center !important; } .hero-query{ width:100% !important; max-width:520px !important; grid-template-columns:1fr !important; text-align:left !important; gap:12px !important; padding:16px !important; } .hero-query-btn{ width:100% !important; justify-content:center !important; } .hero-stage.hero-stage-exact{ width:calc(100vw - 16px) !important; max-width:calc(100vw - 16px) !important; } .cards, .problem-grid, .role-grid, .number-grid, .package-grid, .packages{ grid-template-columns:1fr !important; } .method-card, .problem-card, .role-card, .number-card, .feature-card, .package{ padding:clamp(20px,5vw,28px) !important; min-height:auto !important; } .basic-package-shell{ padding:clamp(20px,5vw,28px) !important; border-radius:26px !important; } .basic-package-copy{ gap:22px !important; } .basic-package-title{ font-size:clamp(34px,9vw,48px) !important; } .basic-package-item{ padding-bottom:18px !important; } .basic-package-video-frame{ width:min(100%,320px) !important; } .profile-centered-section .visual-combo.profile-carousel-box{ width:calc(100vw - var(--side-gap)) !important; max-width:calc(100vw - var(--side-gap)) !important; padding:10px !important; border-radius:26px !important; } .profile-centered-section .profile-carousel{ border-radius:18px !important; } .footer-top, .footer-bottom{ grid-template-columns:1fr !important; } .footer-top > *:last-child{ grid-column:auto !important; } } /* Mobile */ @media (max-width:767px){ :root{ --side-gap:24px; --section-y:52px; --h1-fluid:clamp(40px,12vw,62px); --h2-fluid:clamp(38px,11vw,58px); } .container{ width:calc(100vw - var(--side-gap)) !important; max-width:calc(100vw - var(--side-gap)) !important; } section{ padding-top:52px !important; padding-bottom:52px !important; } .section-head{ margin-bottom:28px !important; } .section-head h2, h2{ line-height:.98 !important; letter-spacing:-.055em !important; } .hero-stage.hero-stage-exact{ width:calc(100vw - 12px) !important; max-width:calc(100vw - 12px) !important; margin-top:16px !important; } .pill-row{ gap:8px !important; } .pill, .basic-package-tag{ font-size:13px !important; padding:8px 11px !important; } .footer-links{ flex-direction:column !important; gap:12px !important; } } /* Small mobile 360–430 */ @media (max-width:430px){ :root{ --side-gap:20px; --h1-fluid:clamp(38px,12.5vw,52px); --h2-fluid:clamp(36px,11.5vw,50px); --body-fluid:16px; } html{ scroll-padding-top:84px !important; } .nav-inner{ min-height:68px !important; } main#top{ padding-top:68px !important; } .brand-combined{ width:min(174px,58vw) !important; } .mobile-menu-toggle{ width:42px !important; height:42px !important; } .nav-links{ left:10px !important; right:10px !important; top:76px !important; } .hero{ padding-top:34px !important; } .hero-chip{ font-size:13px !important; line-height:1.15 !important; min-height:40px !important; } .hero-title-company-sees, .hero h1{ line-height:.96 !important; } .hero-sub{ font-size:16px !important; } .query-text{ font-size:clamp(24px,7.4vw,30px) !important; } .hero-stage.hero-stage-exact{ width:calc(100vw - 8px) !important; max-width:calc(100vw - 8px) !important; } .basic-package-video-frame{ width:min(100%,300px) !important; } .profile-centered-copy p{ font-size:16px !important; } } /* Tiny safety */ @media (max-width:360px){ :root{ --side-gap:16px; } .brand-combined{ width:160px !important; } .hero-title-company-sees, .hero h1{ font-size:36px !important; } .btn{ padding-left:14px !important; padding-right:14px !important; } } /* ---- responsive-final-v1-fixes-cards-packages-query ---- */ @media (min-width:1100px){ .role-grid{ display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:18px !important; } .hero-query{ width:min(1120px, calc(100vw - 64px)) !important; max-width:min(1120px, calc(100vw - 64px)) !important; grid-template-columns:minmax(0,1fr) auto !important; padding:24px 24px 24px 34px !important; } .query-text{ font-size:clamp(34px,4vw,56px) !important; } .hero-query-btn{ min-width:220px !important; min-height:116px !important; font-size:clamp(22px,2vw,30px) !important; } .basic-package-shell, .basic-package-shell.reverse{ grid-template-columns:minmax(0,0.92fr) minmax(430px,1.08fr) !important; gap:28px !important; align-items:stretch !important; } .basic-package-video-shell{ padding:14px !important; } .basic-package-video-frame{ width:min(100%,560px) !important; max-width:560px !important; border-radius:32px !important; } } @media (min-width:1360px){ .basic-package-shell, .basic-package-shell.reverse{ grid-template-columns:minmax(0,0.9fr) minmax(470px,1.1fr) !important; } .basic-package-video-frame{ width:min(100%,600px) !important; max-width:600px !important; } } @media (min-width:768px) and (max-width:1099px){ .role-grid{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:16px !important; } .hero-query{ width:min(100%, calc(100vw - 40px)) !important; max-width:min(100%, calc(100vw - 40px)) !important; } .basic-package-video-shell{ padding:18px !important; } .basic-package-video-frame{ width:min(100%,420px) !important; max-width:420px !important; } } @media (max-width:767px){ .hero-query{ width:calc(100vw - 24px) !important; max-width:calc(100vw - 24px) !important; } .basic-package-video-frame{ width:min(100%,340px) !important; max-width:340px !important; } } /* ---- pixel-perfect-final-v2: compact spacing + smaller two-line headings ---- */ :root{ --section-y:clamp(52px,5.8vw,88px) !important; --section-y-compact:clamp(38px,4.8vw,68px) !important; --h1-fluid:clamp(52px,7.4vw,108px) !important; --h2-fluid:clamp(40px,5.45vw,78px) !important; --h3-fluid:clamp(28px,3.2vw,46px) !important; --body-fluid:clamp(17px,1.25vw,21px) !important; } section{ padding-top:var(--section-y) !important; padding-bottom:var(--section-y) !important; } .section-head{ max-width:min(1120px, calc(100vw - var(--side-gap))) !important; margin-bottom:clamp(26px,3.3vw,42px) !important; } .section-head h2, h2{ max-width:min(1120px, calc(100vw - var(--side-gap))) !important; font-size:var(--h2-fluid) !important; line-height:.96 !important; letter-spacing:-.058em !important; text-wrap:balance; } .hero{ padding-top:clamp(46px,5.8vw,76px) !important; padding-bottom:clamp(24px,3.8vw,46px) !important; } .hero-chip-rail{ margin-bottom:clamp(18px,2.3vw,26px) !important; } .hero-title-company-sees, .hero h1{ font-size:var(--h1-fluid) !important; line-height:.91 !important; letter-spacing:-.07em !important; max-width:min(1080px, calc(100vw - var(--side-gap))) !important; text-wrap:balance; } .hero-sub{ margin-top:clamp(18px,2.2vw,26px) !important; max-width:min(900px, calc(100vw - var(--side-gap))) !important; } .actions{ margin-top:clamp(24px,2.8vw,32px) !important; } .hero-query{ margin-top:clamp(24px,2.8vw,32px) !important; margin-bottom:0 !important; width:min(1120px, calc(100vw - 64px)) !important; max-width:min(1120px, calc(100vw - 64px)) !important; } .hero-stage.hero-stage-exact{ margin-top:clamp(18px,2.4vw,26px) !important; } .cases-strip{ padding-top:0 !important; padding-bottom:clamp(24px,3vw,42px) !important; } .method-section, .problem-section, .effects-section, .functionality-section, .profile-centered-section, .trust-section, .packages-section, .cta{ padding-top:var(--section-y) !important; padding-bottom:var(--section-y) !important; } .effects-marquee-section{ margin-top:clamp(-18px,-1.2vw,-8px) !important; margin-bottom:clamp(28px,3vw,46px) !important; padding-top:clamp(18px,2vw,30px) !important; padding-bottom:clamp(12px,1.8vw,24px) !important; } .role-grid{ display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:clamp(14px,1.35vw,18px) !important; align-items:stretch !important; } .role-card{ min-height:clamp(250px,23vw,300px) !important; padding:clamp(20px,1.8vw,24px) !important; } .role-card h3{ font-size:clamp(30px,2.65vw,40px) !important; margin-bottom:clamp(14px,1.4vw,20px) !important; } .role-card p{ font-size:clamp(14px,.98vw,16px) !important; line-height:1.46 !important; } .role-card a{ margin-top:clamp(16px,1.8vw,22px) !important; } .cards, .problem-grid, .number-grid, .packages, .package-grid{ gap:clamp(14px,1.8vw,24px) !important; } .method-card, .problem-card, .number-card, .feature-card, .package{ padding:clamp(22px,2.1vw,30px) !important; } .basic-package-shell{ gap:clamp(22px,2.2vw,30px) !important; padding:clamp(26px,2.5vw,34px) !important; } .basic-package-title{ font-size:clamp(38px,3.8vw,54px) !important; } .basic-package-list{ gap:clamp(18px,1.8vw,24px) !important; } .basic-package-item{ padding-bottom:clamp(18px,1.8vw,24px) !important; } .basic-package-video-shell{ padding:clamp(12px,1.4vw,18px) !important; min-height:100% !important; } .basic-package-video-frame{ width:min(100%,600px) !important; max-width:600px !important; } .profile-centered-section{ padding-top:var(--section-y-compact) !important; } .profile-centered-wrap{ gap:clamp(20px,2.4vw,28px) !important; } .profile-centered-head{ max-width:min(1080px, calc(100vw - var(--side-gap))) !important; } .profile-centered-head .kicker{ margin-bottom:clamp(16px,2vw,24px) !important; } .profile-centered-head h2{ font-size:clamp(46px,7.2vw,96px) !important; line-height:.9 !important; max-width:min(1040px, calc(100vw - var(--side-gap))) !important; text-wrap:balance; } .profile-centered-copy p{ font-size:clamp(18px,1.65vw,23px) !important; } .cta{ padding-top:clamp(56px,6vw,88px) !important; padding-bottom:clamp(64px,7vw,98px) !important; } .cta-box{ padding:clamp(38px,4.2vw,58px) clamp(24px,3.4vw,36px) !important; } .cta h2{ font-size:clamp(42px,6vw,82px) !important; max-width:min(940px, calc(100vw - var(--side-gap))) !important; text-wrap:balance; } footer{ padding-top:clamp(28px,3vw,38px) !important; padding-bottom:clamp(24px,2.8vw,32px) !important; } .footer-rich{ gap:clamp(20px,2.4vw,28px) !important; } @media (min-width:1360px){ .role-grid{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; } .basic-package-shell, .basic-package-shell.reverse{ grid-template-columns:minmax(0,0.9fr) minmax(500px,1.1fr) !important; } } @media (min-width:1100px) and (max-width:1359px){ .role-grid{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; } .role-card{ min-height:270px !important; } .role-card h3{ font-size:clamp(28px,2.6vw,36px) !important; } .role-card p{ font-size:14px !important; } .role-card a{ font-size:13px !important; } .basic-package-shell, .basic-package-shell.reverse{ grid-template-columns:minmax(0,0.88fr) minmax(440px,1.12fr) !important; } } @media (max-width:1099px){ :root{ --section-y:clamp(46px,6.5vw,72px) !important; --h2-fluid:clamp(38px,7.2vw,64px) !important; } .role-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } .role-card{ min-height:260px !important; } .basic-package-video-frame{ width:min(100%,440px) !important; max-width:440px !important; } } @media (max-width:920px){ :root{ --section-y:50px !important; --h1-fluid:clamp(42px,9.8vw,72px) !important; --h2-fluid:clamp(36px,8.4vw,62px) !important; --body-fluid:clamp(16px,3.7vw,18px) !important; } section{ padding-top:50px !important; padding-bottom:50px !important; } .section-head{ margin-bottom:26px !important; } .hero{ padding-top:clamp(34px,7vw,48px) !important; padding-bottom:32px !important; } .hero-query{ width:calc(100vw - 24px) !important; max-width:calc(100vw - 24px) !important; } .role-grid{ grid-template-columns:1fr !important; } .role-card{ min-height:auto !important; } .basic-package-video-frame{ width:min(100%,360px) !important; max-width:360px !important; } .profile-centered-head h2{ font-size:clamp(38px,9vw,58px) !important; } } @media (max-width:430px){ :root{ --section-y:44px !important; --h1-fluid:clamp(36px,11vw,48px) !important; --h2-fluid:clamp(33px,10vw,46px) !important; } section{ padding-top:44px !important; padding-bottom:44px !important; } .section-head{ margin-bottom:22px !important; } .hero{ padding-top:30px !important; } .hero-title-company-sees, .hero h1{ line-height:.98 !important; } .hero-query{ width:calc(100vw - 20px) !important; max-width:calc(100vw - 20px) !important; transform:rotate(-.8deg) !important; } .query-text{ font-size:clamp(23px,7vw,29px) !important; } .basic-package-video-frame{ width:min(100%,320px) !important; max-width:320px !important; } } /* ---- overflow hotfix v2: hero phones + digital profile inside site bounds ---- */ html, body{ max-width:100%; overflow-x:hidden !important; } main, section, .container{ max-width:100% !important; } .hero.container{ overflow:hidden !important; } .hero-stage.hero-stage-exact{ width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important; overflow:hidden !important; } .hero-stage.hero-stage-exact .hero-exact-image{ width:100% !important; max-width:100% !important; height:auto !important; object-fit:contain !important; object-position:center center !important; } .profile-centered-section{ overflow:hidden !important; } .profile-centered-wrap{ width:100% !important; max-width:100% !important; overflow:hidden !important; } .profile-centered-section .visual-combo.profile-carousel-box{ width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; overflow:hidden !important; } .profile-centered-section .profile-carousel{ width:100% !important; max-width:100% !important; overflow:hidden !important; } .profile-centered-section .profile-slide, .profile-centered-section .profile-slide img{ max-width:100% !important; overflow:hidden !important; } .profile-centered-section .profile-slide img{ width:100% !important; height:100% !important; object-fit:contain !important; object-position:center center !important; } @media (min-width:1280px){ .hero.container{ width:min(1320px, calc(100vw - 72px)) !important; max-width:min(1320px, calc(100vw - 72px)) !important; } .profile-centered-section.container{ width:min(1320px, calc(100vw - 72px)) !important; max-width:min(1320px, calc(100vw - 72px)) !important; } } @media (max-width:1279px){ .hero.container, .profile-centered-section.container{ width:calc(100vw - 40px) !important; max-width:calc(100vw - 40px) !important; } } @media (max-width:920px){ .hero.container, .profile-centered-section.container{ width:calc(100vw - 24px) !important; max-width:calc(100vw - 24px) !important; } } @media (max-width:430px){ .hero.container, .profile-centered-section.container{ width:calc(100vw - 20px) !important; max-width:calc(100vw - 20px) !important; } } /* ---- lead form modal + bottom form v3 ---- */ .lead-modal[hidden]{display:none!important}.lead-modal{position:fixed;inset:0;z-index:600;display:grid;place-items:center;padding:clamp(16px,3vw,36px)}.lead-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.46);backdrop-filter:blur(8px)}.lead-modal-dialog{position:relative;z-index:1;width:min(820px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;border-radius:34px;background:#fff;box-shadow:0 32px 90px rgba(0,0,0,.3);padding:clamp(28px,4vw,46px);animation:leadModalIn .28s cubic-bezier(.16,1,.3,1) both}@keyframes leadModalIn{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}.lead-modal-close{position:absolute;top:22px;right:22px;width:48px;height:48px;border:0;border-radius:999px;background:#f0f1f4;color:#171717;font-size:34px;cursor:pointer;display:flex;align-items:center;justify-content:center}.lead-modal-head{text-align:center;max-width:680px;margin:0 auto 28px}.lead-modal-head h2,.lead-contact-copy h2{margin:0;color:#111827;font-weight:900;line-height:.95;letter-spacing:-.06em;text-wrap:balance}.lead-modal-head h2{font-size:clamp(42px,5.2vw,68px)!important}.lead-contact-copy h2{font-size:clamp(42px,5.4vw,78px)!important}.lead-modal-head h2 span{display:inline-block;position:relative;z-index:1;color:#fff;padding:.02em .24em .08em}.lead-modal-head h2 span:before{content:'';position:absolute;inset:.08em -.08em .02em;z-index:-1;border-radius:999px;background:linear-gradient(90deg,#4f8dff,#2563eb);transform:rotate(-2.2deg)}.lead-modal-head p,.lead-contact-copy p{margin:22px auto 0;color:#687386;font-size:clamp(17px,1.45vw,22px);line-height:1.42}.lead-form{border-radius:30px;background:#f3f4f7;padding:clamp(22px,3vw,34px);border:1px solid rgba(17,24,39,.06)}.lead-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.lead-form-field{display:grid;gap:8px;min-width:0}.lead-form-field-full{margin-top:16px}.lead-form-field span{color:#687386;font-size:14px;font-weight:700}.lead-form input[type=text],.lead-form input[type=tel],.lead-form input[type=email],.lead-form textarea{width:100%;border:1px solid #dfe4ee;border-radius:14px;background:#fff;min-height:60px;padding:0 18px;color:#111827;font:600 17px/1.2 var(--font);outline:none}.lead-form textarea{min-height:112px;padding-top:16px;resize:vertical}.lead-form input:focus,.lead-form textarea:focus{border-color:#4f8dff;box-shadow:0 0 0 4px rgba(79,141,255,.13)}.lead-checks{display:grid;gap:12px;margin:18px 0 16px}.lead-check{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;color:#667085;font-size:15px;line-height:1.38}.lead-check input{width:22px;height:22px;margin:0;accent-color:#4f8dff}.lead-check a{color:#111827;text-decoration:underline;text-underline-offset:3px}.lead-captcha-note{display:flex;align-items:center;justify-content:center;min-height:54px;border:1px dashed #ccd3df;border-radius:14px;background:#fff;color:#7a8494;font-size:14px;margin:0 0 18px}.lead-submit{width:100%;min-height:66px!important;border-radius:14px!important;font-size:20px!important}.lead-form-status{min-height:22px;margin-top:12px;text-align:center;color:#2563eb;font-weight:800}.lead-form-status.is-error{color:#c2410c}body.lead-modal-open{overflow:hidden!important}.cta .lead-contact-box{text-align:left;display:grid;grid-template-columns:minmax(0,.82fr) minmax(460px,1.18fr);gap:clamp(28px,4vw,54px);align-items:center}.lead-contact-copy{max-width:560px}.lead-direct{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.lead-direct a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid #d7dce5;border-radius:999px;background:#fff;color:#3b82f6;font-weight:800;text-decoration:none}.lead-form-inline{box-shadow:0 16px 40px rgba(17,24,39,.08)}@media(max-width:920px){.lead-modal-dialog{width:min(680px,calc(100vw - 24px));border-radius:28px;padding:26px 18px 20px}.lead-modal-close{top:14px;right:14px;width:42px;height:42px;font-size:30px}.lead-modal-head{margin-bottom:20px;padding:0 34px}.lead-modal-head h2{font-size:clamp(36px,9vw,54px)!important}.lead-form-grid{grid-template-columns:1fr}.cta .lead-contact-box{grid-template-columns:1fr;text-align:left}.lead-contact-copy{max-width:none}}@media(max-width:430px){.lead-modal{padding:10px}.lead-modal-dialog{width:calc(100vw - 20px);max-height:calc(100vh - 20px);border-radius:24px;padding:24px 14px 16px}.lead-form{border-radius:22px;padding:18px 14px}.lead-check{font-size:13px}.lead-captcha-note{font-size:12px;text-align:center;padding:0 10px}} /* ---- lead form original fields v4 ---- */ .lead-form-grid-original{grid-template-columns:1fr!important;gap:18px!important;} .lead-form-grid-original .lead-form-field{gap:0!important;} .lead-form-grid-original input[type="text"],.lead-form-grid-original input[type="tel"]{min-height:70px!important;border-radius:12px!important;font-size:20px!important;font-weight:500!important;padding:0 24px!important;background:#fff!important;} .lead-form-grid-original input::placeholder{color:#9aa3b2!important;font-weight:500!important;} .lead-checks{margin:22px 0 18px!important;gap:16px!important;} .lead-check{grid-template-columns:26px 1fr!important;gap:14px!important;} .lead-check input{width:24px!important;height:24px!important;border-radius:5px!important;} .lead-check span{font-size:16px!important;line-height:1.42!important;} .lead-captcha-note{display:none!important;} .lead-captcha{margin:8px 0 22px;min-height:70px;} .lead-captcha-original{background:#fff;border:1px solid #d9dee8;border-radius:14px;padding:0;overflow:hidden;margin:8px 0 22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);} .lead-captcha-slider{display:grid;grid-template-columns:92px 1fr 38px;align-items:center;min-height:70px;padding:10px 10px 8px 22px;gap:10px;} .lead-captcha-handle{width:84px;height:56px;border-radius:14px;background:#5a8cff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:42px;line-height:1;font-weight:300;box-shadow:0 0 0 4px rgba(90,140,255,.16);} .lead-captcha-text{text-align:center;color:#000;font-size:16px;line-height:1;font-weight:500;} .lead-captcha-arrows{color:#b3bac7;font-size:24px;line-height:.72;display:flex;flex-direction:column;align-items:center;justify-content:center;} .lead-captcha-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 12px 12px 22px;color:#7a8494;font-size:14px;line-height:1;} .lead-captcha-help{width:24px;height:24px;border:2px solid #6b7280;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#6b7280;font-size:15px;font-weight:800;} .lead-submit{min-height:68px!important;font-size:20px!important;font-weight:800!important;border-radius:12px!important;} .lead-modal-head{margin-bottom:30px!important;} .lead-form{padding:clamp(26px,3vw,36px)!important;} @media (max-width:430px){ .lead-form-grid-original input[type="text"],.lead-form-grid-original input[type="tel"]{min-height:58px!important;font-size:17px!important;padding:0 18px!important;} .lead-check span{font-size:13px!important;} .lead-captcha-slider{grid-template-columns:76px 1fr 28px;min-height:62px;padding:8px 8px 6px 14px;} .lead-captcha-handle{width:70px;height:48px;border-radius:12px;font-size:34px;} .lead-captcha-text{font-size:14px;} .lead-captcha-bottom{padding:0 10px 10px 14px;font-size:12px;} } /* ---- compact visual blocks + restored CTA copy v5 ---- */ .hero-query{ width:min(960px, calc(100vw - 96px)) !important; max-width:min(960px, calc(100vw - 96px)) !important; padding:18px 18px 18px 26px !important; gap:18px !important; border-width:2px !important; border-radius:16px !important; box-shadow:0 16px 36px rgba(17,24,39,.08), 0 6px 16px rgba(17,24,39,.05) !important; } .hero-query-copy{min-height:86px !important;} .query-text{font-size:clamp(30px,3.25vw,44px) !important;line-height:.96 !important;} .hero-query-btn{min-width:180px !important;min-height:88px !important;padding:18px 28px !important;border-radius:14px !important;font-size:clamp(20px,1.7vw,26px) !important;} .profile-centered-section .visual-combo.profile-carousel-box{width:min(1080px, 100%) !important;max-width:1080px !important;padding:12px !important;border-radius:30px !important;} .profile-centered-section .profile-carousel{border-radius:22px !important;} .profile-centered-section .profile-slide img{width:100% !important;height:100% !important;object-fit:contain !important;} .lead-contact-copy h2{font-size:clamp(38px,4.2vw,64px) !important;line-height:.96 !important;letter-spacing:-.055em !important;max-width:720px !important;} .lead-contact-copy p{max-width:660px !important;font-size:clamp(18px,1.45vw,22px) !important;line-height:1.38 !important;} @media (min-width:1280px){ .profile-centered-section.container{width:min(1200px, calc(100vw - 96px)) !important;max-width:min(1200px, calc(100vw - 96px)) !important;} } @media (max-width:920px){ .hero-query{width:calc(100vw - 24px) !important;max-width:calc(100vw - 24px) !important;padding:16px !important;grid-template-columns:1fr !important;} .hero-query-copy{min-height:auto !important;} .hero-query-btn{width:100% !important;min-height:58px !important;} .profile-centered-section .visual-combo.profile-carousel-box{width:100% !important;max-width:100% !important;padding:10px !important;} .lead-contact-copy h2{font-size:clamp(36px,8.5vw,54px) !important;} } @media (max-width:430px){ .hero-query{width:calc(100vw - 20px) !important;max-width:calc(100vw - 20px) !important;} .query-text{font-size:clamp(23px,7vw,29px) !important;} .lead-contact-copy h2{font-size:clamp(34px,9vw,44px) !important;} .lead-contact-copy p{font-size:16px !important;} } /* ---- package size equalization + intellectual copy v6 ---- */ .functionality-package-stack{ gap:24px !important; } .functionality-package-stack .basic-package-shell{ width:100% !important; min-height:560px !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; align-items:stretch !important; } .functionality-package-stack .basic-package-shell.reverse{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; } .functionality-package-stack .basic-package-copy{ height:100% !important; justify-content:flex-start !important; } .functionality-package-stack .basic-package-list{ gap:18px !important; } .functionality-package-stack .basic-package-item{ padding-bottom:18px !important; } .functionality-package-stack .basic-package-item h3{ font-size:clamp(24px,2.15vw,32px) !important; } .functionality-package-stack .basic-package-item p{ font-size:clamp(15px,1.16vw,18px) !important; line-height:1.36 !important; } .functionality-package-stack .basic-package-video-side{ height:100% !important; min-height:0 !important; } .functionality-package-stack .basic-package-video-shell{ height:100% !important; min-height:100% !important; padding:12px !important; align-items:center !important; justify-content:center !important; } .functionality-package-stack .basic-package-video-frame{ width:min(100%,390px) !important; max-width:390px !important; border-radius:30px !important; } @media (min-width:1360px){ .functionality-package-stack .basic-package-shell{ min-height:590px !important; } .functionality-package-stack .basic-package-video-frame{ width:min(100%,420px) !important; max-width:420px !important; } } @media (max-width:1099px){ .functionality-package-stack .basic-package-shell, .functionality-package-stack .basic-package-shell.reverse{ grid-template-columns:minmax(0,1fr) minmax(280px,.92fr) !important; min-height:520px !important; } .functionality-package-stack .basic-package-video-frame{ width:min(100%,330px) !important; max-width:330px !important; } .functionality-package-stack .basic-package-item p{ font-size:15px !important; } } @media (max-width:760px){ .functionality-package-stack .basic-package-shell, .functionality-package-stack .basic-package-shell.reverse{ grid-template-columns:1fr !important; min-height:auto !important; } .functionality-package-stack .basic-package-shell.reverse .basic-package-copy{ order:1 !important; } .functionality-package-stack .basic-package-shell.reverse .basic-package-video-side{ order:2 !important; } .functionality-package-stack .basic-package-video-frame{ width:min(100%,320px) !important; max-width:320px !important; } } /* ---- desktop nav static / mobile nav fixed v7 ---- */ @media (min-width:921px){ .nav{ position:relative !important; top:auto !important; left:auto !important; right:auto !important; z-index:50 !important; box-shadow:none !important; transform:none !important; } .nav.is-scrolled{ box-shadow:none !important; background:rgba(255,255,255,.88) !important; } main#top{ padding-top:0 !important; } } @media (max-width:920px){ .nav{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; z-index:150 !important; } } /* ---- fixed nav all devices v8 ---- */ .nav{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; z-index:180 !important; background:rgba(255,255,255,.94) !important; -webkit-backdrop-filter:blur(16px) !important; backdrop-filter:blur(16px) !important; border-bottom:1px solid rgba(23,23,23,.08) !important; box-shadow:0 10px 28px rgba(17,24,39,.08) !important; } .nav.is-scrolled{ background:rgba(255,255,255,.96) !important; box-shadow:0 14px 34px rgba(17,24,39,.10) !important; } @media (min-width:921px){ main#top{ padding-top:92px !important; } .nav-inner{ min-height:92px !important; } } @media (max-width:920px){ main#top{ padding-top:72px !important; } } @media (max-width:430px){ main#top{ padding-top:68px !important; } } /* ---- production responsive polish ---- */ img{height:auto;} .hero-picture{display:block;width:100%;} .hero-stage.hero-stage-exact .hero-exact-image{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:auto!important;} @media (max-width:1024px){.hero-stage.hero-stage-exact{width:min(100%,calc(100vw - 20px))!important;max-width:min(100%,calc(100vw - 20px))!important;}} @media (max-width:640px){.hero.container{padding-top:38px!important;padding-bottom:22px!important;}.hero-stage.hero-stage-exact{width:min(100%,calc(100vw - 12px))!important;max-width:min(100%,calc(100vw - 12px))!important;margin-top:12px!important;}.hero-query{width:min(100%,calc(100vw - 20px))!important;}.hero .hero-title-company-sees{font-size:clamp(38px,12vw,54px)!important;line-height:.96!important;}} @media (max-width:420px){.brand-combined{width:220px!important;}.hero-sub{font-size:17px!important;}.btn{width:100%!important;}} /* ---- package phone screen carousel v9 ---- */ .basic-package-video-frame.package-phone-carousel{ width:min(100%,350px) !important; max-width:350px !important; aspect-ratio:1125/2283 !important; overflow:visible !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } .basic-package-video-frame.package-phone-carousel::before{ display:none !important; } .package-phone-stage{ position:relative; width:100%; height:100%; overflow:visible; } .package-phone-slide{ position:absolute; inset:0; display:block; width:100% !important; height:100% !important; object-fit:contain !important; opacity:0; transform:scale(.985); transition:opacity .55s ease, transform .55s ease; filter:drop-shadow(0 22px 34px rgba(16,24,40,.16)); backface-visibility:hidden; user-select:none; pointer-events:none; } .package-phone-slide.is-active{ opacity:1; transform:scale(1); } /* The events mockup contains a detached right-side hardware sliver. */ .package-phone-slide-trim-right{ clip-path:inset(0 1.15% 0 0); filter:none; } .package-phone-dots{ position:absolute; left:50%; bottom:-6px; z-index:3; display:flex; align-items:center; justify-content:center; gap:7px; transform:translateX(-50%); pointer-events:none; } .package-phone-dots span{ width:6px; height:6px; border-radius:999px; background:rgba(79,141,255,.24); transition:width .35s ease, background .35s ease; } .package-phone-dots span.is-active{ width:18px; background:#4f8dff; } .functionality-package-stack .basic-package-video-frame.package-phone-carousel{ width:min(100%,350px) !important; max-width:350px !important; } @media (min-width:1360px){ .functionality-package-stack .basic-package-video-frame.package-phone-carousel{ width:min(100%,370px) !important; max-width:370px !important; } } @media (max-width:1099px){ .functionality-package-stack .basic-package-video-frame.package-phone-carousel{ width:min(100%,310px) !important; max-width:310px !important; } } @media (max-width:760px){ .functionality-package-stack .basic-package-video-frame.package-phone-carousel{ width:min(86vw,300px) !important; max-width:300px !important; } } @media (max-width:430px){ .functionality-package-stack .basic-package-video-frame.package-phone-carousel{ width:min(82vw,270px) !important; max-width:270px !important; } .package-phone-dots{ bottom:-6px; gap:6px; } } @media (prefers-reduced-motion: reduce){ .package-phone-slide, .package-phone-dots span{ transition:none !important; } } /* ---- value-led content and brand polish ---- */ .mechanism-value{ margin-top:14px; padding-left:13px; border-left:3px solid #3b82f6; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:9px; } .mechanism-value strong{ color:#2563eb; font-size:12px; font-weight:900; line-height:1.25; letter-spacing:.055em; text-transform:uppercase; } .mechanism-value span{ color:#202939; font-size:clamp(14px,1.02vw,16px); font-weight:750; line-height:1.36; letter-spacing:-.012em; } @media (max-width:640px){ .mechanism-value{ grid-template-columns:1fr; gap:4px; margin-top:12px; } .mechanism-value span{ font-size:14px; } } /* ---- cookie consent notice ---- */ .cookie-notice[hidden]{ display:none !important; } .cookie-notice{ position:fixed; left:max(22px,env(safe-area-inset-left)); bottom:max(22px,env(safe-area-inset-bottom)); z-index:550; width:min(510px,calc(100vw - 44px)); padding:24px 72px 24px 24px; overflow:hidden; border:1px solid #d8e3f6; border-radius:24px; background:rgba(255,255,255,.98); box-shadow:0 24px 64px rgba(15,23,42,.20),0 8px 24px rgba(37,99,235,.10); color:#172033; opacity:0; transform:translateY(18px) scale(.985); transition:opacity .24s ease,transform .24s cubic-bezier(.2,.8,.2,1); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); } .cookie-notice::before{ content:""; position:absolute; inset:0 auto 0 0; width:5px; background:#3478f6; } .cookie-notice.is-visible{ opacity:1; transform:translateY(0) scale(1); } .cookie-notice-heading{ display:flex; align-items:center; gap:13px; margin-bottom:14px; } .cookie-notice-mark{ display:grid; flex:0 0 42px; width:42px; height:42px; place-items:center; border-radius:11px; background:#3478f6; color:#fff; font-size:23px; font-weight:950; line-height:1; } .cookie-notice-eyebrow{ margin-bottom:3px; color:#3478f6; font-size:11px; font-weight:900; line-height:1.2; letter-spacing:.08em; text-transform:uppercase; } .cookie-notice h2{ margin:0; color:#111827; font-size:20px; font-weight:900; line-height:1.15; letter-spacing:-.025em; } .cookie-notice p{ margin:0; color:#4b5565; font-size:15px; font-weight:550; line-height:1.5; } .cookie-notice p a{ color:#1d5fd1; font-weight:800; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } .cookie-notice-actions{ display:flex; margin-top:18px; } .cookie-notice-accept{ min-width:142px; min-height:48px; padding:0 24px; border:0; border-radius:12px; background:#3478f6; box-shadow:0 8px 20px rgba(52,120,246,.25); color:#fff; font:850 16px/1 var(--font); cursor:pointer; transition:background .18s ease,transform .18s ease,box-shadow .18s ease; } .cookie-notice-accept:hover{ background:#2563d9; box-shadow:0 10px 24px rgba(37,99,217,.30); transform:translateY(-1px); } .cookie-notice-close{ position:absolute; top:18px; right:18px; display:grid; width:42px; height:42px; padding:0; place-items:center; border:0; border-radius:999px; background:#111827; color:#fff; font:400 28px/1 Arial,sans-serif; cursor:pointer; transition:background .18s ease,transform .18s ease; } .cookie-notice-close:hover{ background:#3478f6; transform:rotate(4deg); } .cookie-notice button:focus-visible, .cookie-notice a:focus-visible{ outline:3px solid rgba(52,120,246,.35); outline-offset:3px; } @media (max-width:640px){ .cookie-notice{ left:max(10px,env(safe-area-inset-left)); right:max(10px,env(safe-area-inset-right)); bottom:max(10px,env(safe-area-inset-bottom)); width:auto; padding:20px 18px 18px; border-radius:20px; } .cookie-notice-heading{ gap:11px; margin-bottom:12px; padding-right:42px; } .cookie-notice-mark{ flex-basis:38px; width:38px; height:38px; border-radius:10px; font-size:20px; } .cookie-notice h2{ font-size:18px; } .cookie-notice p{ font-size:14px; line-height:1.46; } .cookie-notice-close{ top:14px; right:14px; width:38px; height:38px; font-size:25px; } .cookie-notice-actions{ margin-top:15px; } .cookie-notice-accept{ width:100%; min-height:48px; } } @media (prefers-reduced-motion:reduce){ .cookie-notice, .cookie-notice-accept, .cookie-notice-close{ transition:none !important; } } /* ---- final responsive footer and cookie notice ---- */ .site-footer{ overflow:hidden; padding:clamp(36px,4vw,56px) 0 clamp(28px,3.2vw,42px) !important; background:#f6f8fb !important; } .site-footer .footer-rich{ gap:clamp(28px,3vw,42px) !important; } .site-footer .footer-top{ display:grid !important; grid-template-columns:minmax(170px,.52fr) minmax(180px,.48fr) minmax(0,1.45fr) !important; align-items:start !important; gap:clamp(32px,4vw,72px) !important; } .site-footer .footer-company, .site-footer .footer-navigation, .site-footer .footer-cert-image, .site-footer .footer-bottom > *{ min-width:0; } .site-footer .footer-brand-mark{ display:inline-flex; margin:0 !important; color:#171717; text-decoration:none; } .site-footer .footer-brand-copy{ color:#171717 !important; font-size:clamp(24px,2vw,30px) !important; font-weight:900 !important; line-height:.98 !important; letter-spacing:-.035em !important; } .site-footer .footer-nav-title{ color:#667085; font-size:18px; font-weight:700; line-height:1.2; } .site-footer .footer-nav{ display:grid !important; grid-template-columns:1fr !important; gap:12px !important; margin-top:18px !important; } .site-footer .footer-nav a{ width:max-content; max-width:100%; color:#20242c !important; font-size:17px !important; line-height:1.3 !important; text-decoration:none; } .site-footer .footer-nav a:hover, .site-footer .footer-links a:hover{ color:var(--blue) !important; } .site-footer .footer-cert-image{ display:flex !important; align-items:flex-start !important; justify-content:flex-end !important; margin:0 !important; padding:0 !important; overflow:visible !important; } .site-footer .footer-cert-image img{ display:block !important; width:min(100%,680px) !important; max-width:680px !important; height:auto !important; object-fit:contain !important; object-position:right top !important; } .site-footer .footer-divider{ background:#d9dee8 !important; } .site-footer .footer-bottom{ display:grid !important; grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr) !important; align-items:start !important; gap:clamp(28px,4vw,70px) !important; } .site-footer .footer-links{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; align-items:start !important; gap:14px 28px !important; } .site-footer .footer-links a{ color:#626973 !important; font-size:15px !important; line-height:1.4 !important; text-decoration:none; } .site-footer .footer-copy{ justify-self:stretch !important; max-width:none !important; min-width:0; padding-right:76px; color:#626973 !important; font-size:15px !important; line-height:1.5 !important; overflow-wrap:anywhere; } .site-footer .footer-copy span + span{ margin-top:10px !important; } body.cookie-notice-open .floating{ opacity:0; pointer-events:none; } .cookie-notice{ position:fixed !important; left:calc(16px + env(safe-area-inset-left,0px)) !important; right:calc(16px + env(safe-area-inset-right,0px)) !important; bottom:calc(16px + env(safe-area-inset-bottom,0px)) !important; z-index:550 !important; width:auto !important; max-width:none !important; display:flex !important; align-items:center !important; gap:clamp(24px,3vw,48px) !important; padding:22px 28px 22px 32px !important; overflow:hidden !important; border:1px solid #e1e5ec !important; border-radius:22px !important; background:rgba(255,255,255,.98) !important; box-shadow:0 18px 48px rgba(17,24,39,.12) !important; opacity:0; transform:translateY(8px); transition:opacity .22s ease,transform .22s ease !important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } .cookie-notice::before{ display:none !important; } .cookie-notice.is-visible{ opacity:1; transform:translateY(0); } .cookie-notice p{ flex:1 1 auto; min-width:0; margin:0 !important; color:#344054 !important; font-size:clamp(15px,1.25vw,18px) !important; font-weight:500 !important; line-height:1.52 !important; } .cookie-notice p a{ color:#2563eb !important; font-weight:700 !important; text-decoration:underline !important; text-underline-offset:3px !important; } .cookie-notice-actions{ flex:0 0 auto; margin:0 !important; } .cookie-notice-accept{ min-width:164px !important; min-height:62px !important; padding:0 28px !important; border:0 !important; border-radius:16px !important; background:#2f65e9 !important; color:#fff !important; font:800 18px/1 var(--font) !important; box-shadow:none !important; } .cookie-notice-accept:hover{ background:#2558d7 !important; box-shadow:0 10px 24px rgba(37,88,215,.24) !important; } @media (max-width:1199px){ .site-footer .footer-top{ grid-template-columns:minmax(170px,.55fr) minmax(200px,.65fr) !important; gap:32px 52px !important; } .site-footer .footer-cert-image{ grid-column:1 / -1 !important; justify-content:center !important; padding-top:4px !important; } .site-footer .footer-cert-image img{ width:min(100%,760px) !important; max-width:760px !important; object-position:center top !important; } .site-footer .footer-bottom{ grid-template-columns:1fr !important; gap:24px !important; } .site-footer .footer-copy{ padding-right:0 !important; } .floating{ display:none !important; } } @media (max-width:760px){ .site-footer{ padding-top:34px !important; } .site-footer .footer-top{ grid-template-columns:1fr !important; gap:26px !important; } .site-footer .footer-cert-image{ grid-column:auto !important; justify-content:flex-start !important; padding-top:2px !important; } .site-footer .footer-cert-image img{ width:100% !important; max-width:620px !important; object-position:left top !important; } .site-footer .footer-nav{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px 22px !important; } .site-footer .footer-nav a{ width:auto !important; font-size:16px !important; } .site-footer .footer-links{ grid-template-columns:1fr !important; gap:12px !important; } .site-footer .footer-copy{ font-size:14px !important; } .cookie-notice{ left:calc(10px + env(safe-area-inset-left,0px)) !important; right:calc(10px + env(safe-area-inset-right,0px)) !important; bottom:calc(10px + env(safe-area-inset-bottom,0px)) !important; display:grid !important; gap:16px !important; padding:19px !important; border-radius:18px !important; } .cookie-notice p{ font-size:14px !important; line-height:1.48 !important; } .cookie-notice-actions, .cookie-notice-accept{ width:100% !important; } .cookie-notice-accept{ min-height:50px !important; font-size:16px !important; } } @media (max-width:520px){ .site-footer .footer-nav{ grid-template-columns:1fr !important; } } /* ---- mobile paired hero + tags + value-result polish v2 ---- */ @media (max-width:640px){ .hero-stage.hero-stage-exact{ width:100% !important; max-width:100% !important; margin-top:18px !important; padding:0 6px 12px !important; overflow:visible !important; } .hero-picture, .hero-stage.hero-stage-exact .hero-exact-image{ display:block !important; width:100% !important; max-width:100% !important; height:auto !important; object-fit:contain !important; object-position:center top !important; } .basic-package-tags{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; overflow:visible !important; width:100% !important; } .basic-package-tag{ width:100% !important; min-width:0 !important; padding:9px 7px !important; font-size:12px !important; line-height:1 !important; white-space:nowrap !important; text-align:center !important; } .mechanism-value{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:6px !important; margin-top:14px !important; padding:2px 0 2px 13px !important; } .mechanism-value strong{ font-size:11px !important; line-height:1 !important; letter-spacing:.06em !important; } .mechanism-value span{ width:100% !important; font-size:14px !important; line-height:1.34 !important; font-weight:750 !important; } } @media (max-width:380px){ .basic-package-tag{ font-size:11px !important; padding:8px 5px !important; } .mechanism-value span{ font-size:13px !important; } } /* Equal-size hero phones for tablet and mobile layouts. */ .hero-device-grid{ display:none; } @media (max-width:1024px){ .hero-stage.hero-stage-exact .hero-picture{ display:none !important; } .hero-stage.hero-stage-exact .hero-device-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; gap:clamp(12px,2.2vw,24px); width:100%; padding:0 clamp(4px,1.2vw,12px) clamp(22px,3vw,34px); line-height:0; } .hero-device-slot{ position:relative; min-width:0; aspect-ratio:1125/2284; overflow:visible; } .hero-device-screen{ display:block; width:100% !important; height:100% !important; max-width:none !important; object-fit:contain !important; object-position:center top !important; filter:drop-shadow(0 12px 18px rgba(15,23,42,.12)); -webkit-box-reflect:below 0 linear-gradient(to bottom,rgba(15,23,42,.13),transparent 8%); } .hero-device-screen-trim-right{ clip-path:inset(0 1.15% 0 0); filter:none; } } @media (max-width:640px){ .hero-stage.hero-stage-exact .hero-device-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,8vw,42px) clamp(10px,3.2vw,16px); padding:0 2px clamp(18px,5vw,26px); } } /* ---- balanced methodology + compact package value layout v3 ---- */ .method-card:nth-child(3) h3{ display:flex !important; flex-direction:column !important; gap:0 !important; font-size:clamp(25px,2.15vw,34px) !important; line-height:.98 !important; } .method-card:nth-child(3) .method-title-line{ display:block !important; } @media (min-width:1100px){ .method-card:nth-child(3) .method-title-line-2{ white-space:nowrap !important; } } .functionality-package-stack{ gap:24px !important; } .functionality-package-stack .basic-package-shell, .functionality-package-stack .basic-package-shell.reverse{ min-height:520px !important; grid-template-columns:minmax(0,1fr) minmax(390px,.92fr) !important; gap:26px !important; padding:28px !important; align-items:stretch !important; } .functionality-package-stack .basic-package-copy{ gap:20px !important; height:100% !important; } .functionality-package-stack .basic-package-list{ gap:15px !important; } .functionality-package-stack .basic-package-item{ padding-bottom:15px !important; } .functionality-package-stack .basic-package-item h3{ margin-bottom:7px !important; font-size:clamp(24px,2.05vw,31px) !important; } .functionality-package-stack .basic-package-item p{ font-size:clamp(15px,1.05vw,17px) !important; line-height:1.34 !important; } .functionality-package-stack .mechanism-value{ margin-top:10px !important; padding-left:11px !important; grid-template-columns:84px minmax(0,1fr) !important; gap:8px !important; align-items:start !important; } .functionality-package-stack .mechanism-value strong{ padding-top:2px !important; font-size:11px !important; line-height:1.15 !important; } .functionality-package-stack .mechanism-value span{ font-size:clamp(13px,.95vw,15px) !important; line-height:1.3 !important; } .functionality-package-stack .basic-package-tags{ margin-top:11px !important; gap:7px !important; } .functionality-package-stack .basic-package-tag{ padding:8px 12px !important; font-size:13px !important; } .functionality-package-stack .basic-package-video-side, .functionality-package-stack .basic-package-video-shell{ min-height:0 !important; height:100% !important; } .functionality-package-stack .basic-package-video-shell{ padding:10px !important; } .functionality-package-stack .basic-package-video-frame.package-phone-carousel{ width:min(100%,410px) !important; max-width:410px !important; } @media (min-width:1360px){ .functionality-package-stack .basic-package-shell, .functionality-package-stack .basic-package-shell.reverse{ min-height:545px !important; grid-template-columns:minmax(0,1fr) minmax(430px,.94fr) !important; } .functionality-package-stack .basic-package-video-frame.package-phone-carousel{ width:min(100%,440px) !important; max-width:440px !important; } } @media (max-width:1099px){ .functionality-package-stack .basic-package-shell, .functionality-package-stack .basic-package-shell.reverse{ min-height:500px !important; grid-template-columns:minmax(0,1fr) minmax(300px,.86fr) !important; gap:22px !important; padding:24px !important; } .functionality-package-stack .basic-package-video-frame.package-phone-carousel{ width:min(100%,360px) !important; max-width:360px !important; } .functionality-package-stack .mechanism-value{ grid-template-columns:76px minmax(0,1fr) !important; } } @media (max-width:760px){ .functionality-package-stack .basic-package-shell, .functionality-package-stack .basic-package-shell.reverse{ min-height:auto !important; grid-template-columns:1fr !important; gap:22px !important; padding:22px !important; } .functionality-package-stack .basic-package-shell.reverse .basic-package-copy{ order:1 !important; } .functionality-package-stack .basic-package-shell.reverse .basic-package-video-side{ order:2 !important; } .functionality-package-stack .mechanism-value{ display:grid !important; grid-template-columns:1fr !important; gap:5px !important; padding-left:12px !important; } .functionality-package-stack .basic-package-video-frame.package-phone-carousel{ width:min(88vw,330px) !important; max-width:330px !important; } .functionality-package-stack .basic-package-tags{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; width:100% !important; } .functionality-package-stack .basic-package-tag{ width:100% !important; min-width:0 !important; white-space:nowrap !important; padding:9px 6px !important; font-size:12px !important; } } @media (max-width:430px){ .functionality-package-stack .basic-package-video-frame.package-phone-carousel{ width:min(86vw,300px) !important; max-width:300px !important; } .functionality-package-stack .basic-package-item p{ font-size:15px !important; } .functionality-package-stack .mechanism-value span{ font-size:13px !important; } .functionality-package-stack .basic-package-tag{ font-size:11px !important; } } /* Same text/modules at every breakpoint: only the visual arrangement changes. */ /* ---- method card 03: exact two-line title v4 ---- */ .method-card:nth-child(3) h3{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:0 !important; width:100% !important; font-size:clamp(24px,2vw,31px) !important; line-height:1.02 !important; letter-spacing:-.045em !important; } .method-card:nth-child(3) .method-title-line{ display:block !important; width:auto !important; } .method-card:nth-child(3) .method-title-line-1{ white-space:nowrap !important; } .method-card:nth-child(3) .method-title-line-2{ white-space:nowrap !important; font-size:.88em !important; } @media (max-width:760px){ .method-card:nth-child(3) h3{ font-size:clamp(25px,7vw,30px) !important; } .method-card:nth-child(3) .method-title-line-2{ font-size:.84em !important; } } @media (max-width:380px){ .method-card:nth-child(3) h3{ font-size:24px !important; } .method-card:nth-child(3) .method-title-line-2{ font-size:.81em !important; } } /* ---- final package copy + exact methodology title v5 ---- */ .method-card:nth-child(3){ overflow:hidden !important; } .method-card:nth-child(3) h3{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:1px !important; width:100% !important; max-width:100% !important; overflow:hidden !important; line-height:1.02 !important; letter-spacing:-.055em !important; } .method-card:nth-child(3) .method-title-line{ display:block !important; max-width:100% !important; } .method-card:nth-child(3) .method-title-line-1{ white-space:nowrap !important; font-size:clamp(18px,1.34vw,20px) !important; } .method-card:nth-child(3) .method-title-line-2{ white-space:nowrap !important; font-size:clamp(25px,2.05vw,31px) !important; } .functionality-package-stack{ gap:26px !important; } .functionality-package-stack .basic-package-shell, .functionality-package-stack .basic-package-shell.reverse{ grid-template-columns:minmax(0,1fr) minmax(420px,.92fr) !important; gap:28px !important; padding:30px !important; min-height:780px !important; align-items:stretch !important; } .functionality-package-stack .basic-package-copy{ min-width:0 !important; height:100% !important; gap:20px !important; } .functionality-package-stack .basic-package-list{ gap:16px !important; } .functionality-package-stack .basic-package-item{ padding-bottom:16px !important; } .functionality-package-stack .basic-package-item h3{ margin-bottom:8px !important; font-size:clamp(25px,2vw,31px) !important; } .functionality-package-stack .basic-package-item p{ font-size:clamp(15px,1.05vw,17px) !important; line-height:1.38 !important; } .functionality-package-stack .mechanism-value{ margin-top:11px !important; padding-left:12px !important; display:grid !important; grid-template-columns:84px minmax(0,1fr) !important; align-items:start !important; gap:8px !important; } .functionality-package-stack .mechanism-value strong{ padding-top:2px !important; font-size:11px !important; line-height:1.1 !important; } .functionality-package-stack .mechanism-value span{ min-width:0 !important; font-size:clamp(13px,.92vw,15px) !important; line-height:1.32 !important; } .functionality-package-stack .basic-package-tags{ margin-top:12px !important; display:flex !important; flex-wrap:wrap !important; gap:8px !important; overflow:visible !important; } .functionality-package-stack .basic-package-tag{ padding:8px 12px !important; font-size:13px !important; line-height:1 !important; white-space:nowrap !important; } .functionality-package-stack .basic-package-video-side, .functionality-package-stack .basic-package-video-shell{ min-width:0 !important; min-height:0 !important; height:100% !important; } .functionality-package-stack .basic-package-video-shell{ padding:12px !important; } .functionality-package-stack .basic-package-video-frame.package-phone-carousel{ width:min(100%,450px) !important; max-width:450px !important; } @media (min-width:1440px){ .functionality-package-stack .basic-package-shell, .functionality-package-stack .basic-package-shell.reverse{ min-height:810px !important; grid-template-columns:minmax(0,1fr) minmax(460px,.94fr) !important; } .functionality-package-stack .basic-package-video-frame.package-phone-carousel{ width:min(100%,475px) !important; max-width:475px !important; } } @media (max-width:1180px){ .method-card:nth-child(3) .method-title-line-1{ font-size:19px !important; } .method-card:nth-child(3) .method-title-line-2{ font-size:27px !important; } .functionality-package-stack .basic-package-shell, .functionality-package-stack .basic-package-shell.reverse{ grid-template-columns:minmax(0,1fr) minmax(350px,.88fr) !important; min-height:750px !important; gap:24px !important; padding:26px !important; } .functionality-package-stack .basic-package-video-frame.package-phone-carousel{ width:min(100%,400px) !important; max-width:400px !important; } } @media (max-width:920px){ .method-card:nth-child(3) .method-title-line-1{ font-size:22px !important; } .method-card:nth-child(3) .method-title-line-2{ font-size:30px !important; } .functionality-package-stack .basic-package-shell, .functionality-package-stack .basic-package-shell.reverse{ grid-template-columns:1fr !important; min-height:auto !important; gap:24px !important; padding:24px !important; } .functionality-package-stack .basic-package-shell.reverse .basic-package-copy{ order:1 !important; } .functionality-package-stack .basic-package-shell.reverse .basic-package-video-side{ order:2 !important; } .functionality-package-stack .basic-package-video-frame.package-phone-carousel{ width:min(100%,370px) !important; max-width:370px !important; } } @media (max-width:640px){ .method-card:nth-child(3) .method-title-line-1{ font-size:clamp(20px,5.8vw,24px) !important; } .method-card:nth-child(3) .method-title-line-2{ font-size:clamp(28px,8vw,34px) !important; } .functionality-package-stack .basic-package-shell, .functionality-package-stack .basic-package-shell.reverse{ padding:21px !important; } .functionality-package-stack .mechanism-value{ grid-template-columns:1fr !important; gap:5px !important; } .functionality-package-stack .basic-package-tags{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; width:100% !important; } .functionality-package-stack .basic-package-tag{ width:100% !important; min-width:0 !important; padding:9px 6px !important; font-size:12px !important; text-align:center !important; } .functionality-package-stack .basic-package-video-frame.package-phone-carousel{ width:min(88vw,330px) !important; max-width:330px !important; } } @media (max-width:380px){ .method-card:nth-child(3) .method-title-line-1{ font-size:19px !important; } .method-card:nth-child(3) .method-title-line-2{ font-size:27px !important; } .functionality-package-stack .basic-package-tag{ font-size:11px !important; } } /* Text, modules and DOM stay identical across breakpoints; only layout changes. */ /* FINAL V6 PACKAGE COPY + METHOD HEADING BALANCE */ .method-card h3{ font-size:clamp(22px,1.55vw,22px) !important; line-height:1.08 !important; letter-spacing:-0.04em !important; min-height:0 !important; } .method-card:nth-child(3){overflow:hidden !important;} .method-card:nth-child(3) h3{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:0 !important; width:100% !important; max-width:100% !important; overflow:hidden !important; } .method-card:nth-child(3) .method-title-line{ display:block !important; max-width:100% !important; font-size:inherit !important; line-height:inherit !important; white-space:nowrap !important; } #features .functionality-package-stack{ gap:28px !important; } #features .basic-package-shell, #features .basic-package-shell.reverse{ grid-template-columns:minmax(0,1.02fr) minmax(470px,0.9fr) !important; gap:34px !important; padding:28px 28px 28px 30px !important; align-items:stretch !important; min-height:0 !important; } #features .basic-package-copy{ display:flex !important; flex-direction:column !important; min-width:0 !important; height:100% !important; } #features .basic-package-title{ margin:0 0 14px !important; } #features .basic-package-list{ display:flex !important; flex-direction:column !important; gap:18px !important; min-width:0 !important; } #features .basic-package-item{ padding-bottom:18px !important; } #features .basic-package-item:last-child{ padding-bottom:0 !important; } #features .basic-package-item h3{ margin-bottom:10px !important; font-size:clamp(23px,1.7vw,31px) !important; line-height:1.08 !important; } #features .basic-package-item p{ font-size:clamp(15px,0.98vw,17px) !important; line-height:1.42 !important; } #features .mechanism-value{ margin-top:12px !important; padding-left:12px !important; display:grid !important; grid-template-columns:84px minmax(0,1fr) !important; gap:8px !important; align-items:start !important; } #features .mechanism-value strong{ padding-top:2px !important; font-size:12px !important; line-height:1.1 !important; } #features .mechanism-value span{ font-size:clamp(13px,0.92vw,15px) !important; line-height:1.34 !important; } #features .basic-package-tags{ margin-top:14px !important; display:flex !important; flex-wrap:wrap !important; gap:10px !important; } #features .basic-package-tag{ white-space:nowrap !important; font-size:13px !important; line-height:1 !important; padding:9px 14px !important; } #features .basic-package-video-side, #features .basic-package-video-shell{ min-width:0 !important; height:100% !important; } #features .basic-package-video-shell{ display:flex !important; align-items:center !important; justify-content:center !important; padding:12px !important; } #features .basic-package-video-frame.package-phone-carousel{ width:min(100%,455px) !important; max-width:455px !important; } #features .basic-package-shell:nth-of-type(2) .basic-package-video-frame.package-phone-carousel{ width:min(100%,430px) !important; max-width:430px !important; } #features .basic-package-shell:nth-of-type(3) .basic-package-video-frame.package-phone-carousel{ width:min(100%,405px) !important; max-width:405px !important; } @media (max-width:1280px){ #features .basic-package-shell, #features .basic-package-shell.reverse{ grid-template-columns:minmax(0,1fr) minmax(410px,0.88fr) !important; gap:28px !important; } #features .basic-package-video-frame.package-phone-carousel{width:min(100%,420px) !important; max-width:420px !important;} #features .basic-package-shell:nth-of-type(2) .basic-package-video-frame.package-phone-carousel{width:min(100%,400px) !important; max-width:400px !important;} #features .basic-package-shell:nth-of-type(3) .basic-package-video-frame.package-phone-carousel{width:min(100%,380px) !important; max-width:380px !important;} } @media (max-width:1100px){ #features .basic-package-shell, #features .basic-package-shell.reverse{ grid-template-columns:minmax(0,1fr) minmax(360px,0.82fr) !important; gap:24px !important; padding:24px !important; } #features .basic-package-item h3{font-size:clamp(21px,1.8vw,27px) !important;} #features .basic-package-tag{font-size:12.5px !important; padding:8px 12px !important;} #features .basic-package-video-frame.package-phone-carousel{width:min(100%,370px) !important; max-width:370px !important;} #features .basic-package-shell:nth-of-type(2) .basic-package-video-frame.package-phone-carousel{width:min(100%,352px) !important; max-width:352px !important;} #features .basic-package-shell:nth-of-type(3) .basic-package-video-frame.package-phone-carousel{width:min(100%,338px) !important; max-width:338px !important;} } @media (max-width:920px){ #features .basic-package-shell, #features .basic-package-shell.reverse{ grid-template-columns:1fr !important; gap:22px !important; padding:22px !important; } #features .basic-package-shell.reverse .basic-package-copy{order:1 !important;} #features .basic-package-shell.reverse .basic-package-video-side{order:2 !important;} #features .basic-package-video-frame.package-phone-carousel, #features .basic-package-shell:nth-of-type(2) .basic-package-video-frame.package-phone-carousel, #features .basic-package-shell:nth-of-type(3) .basic-package-video-frame.package-phone-carousel{ width:min(100%,380px) !important; max-width:380px !important; } } @media (max-width:640px){ .method-card h3{font-size:22px !important;} #features .basic-package-item h3{font-size:22px !important;} #features .mechanism-value{grid-template-columns:1fr !important; gap:6px !important;} #features .basic-package-tags{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; width:100% !important; } #features .basic-package-tag{ width:100% !important; min-width:0 !important; text-align:center !important; white-space:nowrap !important; padding:9px 8px !important; } #features .basic-package-video-frame.package-phone-carousel, #features .basic-package-shell:nth-of-type(2) .basic-package-video-frame.package-phone-carousel, #features .basic-package-shell:nth-of-type(3) .basic-package-video-frame.package-phone-carousel{ width:min(100%,336px) !important; max-width:336px !important; } } @media (max-width:380px){ .method-card h3{font-size:21px !important;} #features .basic-package-item h3{font-size:20px !important;} #features .basic-package-tag{font-size:11px !important;} #features .basic-package-video-frame.package-phone-carousel, #features .basic-package-shell:nth-of-type(2) .basic-package-video-frame.package-phone-carousel, #features .basic-package-shell:nth-of-type(3) .basic-package-video-frame.package-phone-carousel{ width:min(100%,310px) !important; max-width:310px !important; } } /* Final responsive layout: symmetrical methodology and balanced package cards */ html, body{ max-width:100% !important; overflow-x:hidden !important; } .cases-strip, .after-features-strip{ contain:paint; } #method .method-grid{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:16px !important; align-items:stretch !important; } #method .method-card{ display:flex !important; flex-direction:column !important; min-width:0 !important; min-height:370px !important; padding:clamp(26px,2.2vw,34px) !important; overflow:hidden !important; } #method .method-card > b{ margin:0 0 24px !important; font-size:clamp(52px,4vw,64px) !important; line-height:.9 !important; } #method .method-card h3, #method .method-card:nth-child(3) h3{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:0 !important; width:100% !important; max-width:100% !important; min-height:2.16em !important; margin:0 0 16px !important; overflow:visible !important; font-size:clamp(20px,1.38vw,22px) !important; line-height:1.08 !important; letter-spacing:-.04em !important; } #method .method-card .method-title-line, #method .method-card .method-title-line-1, #method .method-card .method-title-line-2, #method .method-card:nth-child(3) .method-title-line, #method .method-card:nth-child(3) .method-title-line-1, #method .method-card:nth-child(3) .method-title-line-2{ display:block !important; width:auto !important; max-width:100% !important; overflow:visible !important; font:inherit !important; line-height:inherit !important; letter-spacing:inherit !important; white-space:nowrap !important; } #method .method-card p{ margin:0 !important; color:var(--muted) !important; font-size:clamp(15px,1.05vw,17px) !important; line-height:1.5 !important; letter-spacing:-.012em !important; } #features .functionality-package-stack{ gap:32px !important; } #features .feature-package{ margin:0 !important; min-width:0 !important; } #features .feature-package .basic-package-shell, #features .feature-package .basic-package-shell.reverse{ grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr) !important; gap:clamp(26px,3vw,42px) !important; min-height:0 !important; padding:clamp(26px,2.7vw,38px) !important; align-items:stretch !important; } #features .feature-package .basic-package-copy{ display:flex !important; flex-direction:column !important; min-width:0 !important; height:100% !important; gap:18px !important; } #features .feature-package .basic-package-title{ margin:0 0 8px !important; font-size:clamp(42px,4vw,56px) !important; line-height:.98 !important; letter-spacing:-.055em !important; text-wrap:balance; } #features .feature-package .basic-package-list{ display:flex !important; flex-direction:column !important; gap:0 !important; min-width:0 !important; } #features .feature-package .basic-package-item{ margin:0 0 22px !important; padding:0 0 22px !important; border-bottom:1px solid #e7e8ee !important; } #features .feature-package .basic-package-item:last-child{ margin:0 !important; padding:0 !important; border-bottom:0 !important; } #features .feature-package .basic-package-item h3{ margin:0 0 10px !important; font-size:clamp(24px,1.85vw,29px) !important; line-height:1.08 !important; letter-spacing:-.04em !important; text-wrap:balance; } #features .feature-package .basic-package-item > p:not(.mechanism-value), #features .feature-package .basic-package-item .mechanism-value, #features .feature-package .basic-package-item .mechanism-value span{ color:#5e5e5e !important; font-size:clamp(15px,1.05vw,17px) !important; font-weight:400 !important; line-height:1.45 !important; letter-spacing:-.012em !important; } #features .feature-package .basic-package-item .mechanism-value{ display:block !important; grid-template-columns:none !important; margin:12px 0 0 !important; padding:0 !important; border:0 !important; text-indent:1.15em !important; text-transform:none !important; } #features .feature-package .mechanism-value strong{ display:inline !important; padding:0 !important; color:#2563eb !important; font-size:inherit !important; font-weight:800 !important; line-height:inherit !important; letter-spacing:inherit !important; text-transform:none !important; } #features .feature-package .mechanism-value span{ display:inline !important; } #features .feature-package .basic-package-tags{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin-top:14px !important; overflow:visible !important; } #features .feature-package .basic-package-tag{ width:auto !important; min-width:0 !important; padding:8px 12px !important; font-size:13px !important; line-height:1 !important; text-align:center !important; white-space:nowrap !important; } #features .feature-package .basic-package-video-side{ display:flex !important; align-items:stretch !important; justify-content:center !important; min-width:0 !important; min-height:0 !important; } #features .feature-package .basic-package-video-shell{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important; padding:18px !important; } #features .feature-package .basic-package-video-frame.package-phone-carousel{ width:min(100%,400px) !important; max-width:400px !important; margin:0 auto 22px !important; } #features .feature-package .package-phone-dots{ bottom:-18px !important; } @media (max-width:1320px){ #method .method-card{ padding:28px !important; } #features .feature-package .basic-package-shell, #features .feature-package .basic-package-shell.reverse{ grid-template-columns:minmax(0,1.08fr) minmax(370px,.92fr) !important; gap:28px !important; padding:28px !important; } #features .feature-package .basic-package-video-frame.package-phone-carousel{ width:min(100%,380px) !important; max-width:380px !important; } } @media (max-width:1180px){ #method .method-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } #method .method-card{ min-height:320px !important; } #method .method-card h3, #method .method-card:nth-child(3) h3{ font-size:24px !important; } #features .feature-package .basic-package-shell, #features .feature-package .basic-package-shell.reverse{ grid-template-columns:minmax(0,1fr) minmax(350px,.82fr) !important; gap:24px !important; padding:26px !important; } #features .feature-package .basic-package-title{ font-size:clamp(39px,4vw,47px) !important; } #features .feature-package .basic-package-item h3{ font-size:clamp(22px,2.2vw,27px) !important; } #features .feature-package .basic-package-video-frame.package-phone-carousel{ width:min(100%,350px) !important; max-width:350px !important; } } @media (max-width:920px){ #features .feature-package .basic-package-shell, #features .feature-package .basic-package-shell.reverse{ grid-template-columns:1fr !important; gap:24px !important; padding:24px !important; } #features .feature-package .basic-package-shell.reverse .basic-package-copy{ order:1 !important; } #features .feature-package .basic-package-shell.reverse .basic-package-video-side{ order:2 !important; } #features .feature-package .basic-package-video-side, #features .feature-package .basic-package-video-shell{ height:auto !important; } #features .feature-package .basic-package-video-frame.package-phone-carousel{ width:min(100%,370px) !important; max-width:370px !important; } } @media (max-width:720px){ #method .method-grid{ grid-template-columns:1fr !important; } #method .method-card{ min-height:0 !important; padding:26px !important; } #method .method-card > b{ margin-bottom:20px !important; font-size:54px !important; } #method .method-card h3, #method .method-card:nth-child(3) h3{ font-size:24px !important; } #features .functionality-package-stack{ gap:24px !important; } #features .feature-package .basic-package-shell, #features .feature-package .basic-package-shell.reverse{ padding:21px !important; } #features .feature-package .basic-package-title{ font-size:clamp(34px,10vw,42px) !important; } #features .feature-package .basic-package-item{ margin-bottom:20px !important; padding-bottom:20px !important; } #features .feature-package .basic-package-item h3{ font-size:22px !important; } #features .feature-package .basic-package-item > p:not(.mechanism-value), #features .feature-package .basic-package-item .mechanism-value, #features .feature-package .basic-package-item .mechanism-value span{ font-size:15px !important; line-height:1.48 !important; } #features .feature-package .basic-package-tags{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; width:100% !important; } #features .feature-package .basic-package-tag{ width:100% !important; padding:9px 6px !important; font-size:12px !important; } #features .feature-package .basic-package-video-shell{ padding:14px !important; } #features .feature-package .basic-package-video-frame.package-phone-carousel{ width:min(86vw,320px) !important; max-width:320px !important; } } @media (max-width:380px){ #method .method-card{ padding:22px !important; } #method .method-card h3, #method .method-card:nth-child(3) h3{ font-size:20px !important; } #features .feature-package .basic-package-shell, #features .feature-package .basic-package-shell.reverse{ padding:18px !important; } #features .feature-package .basic-package-title{ font-size:32px !important; } #features .feature-package .basic-package-item h3{ font-size:20px !important; } #features .feature-package .basic-package-tag{ font-size:11px !important; } #features .feature-package .basic-package-video-frame.package-phone-carousel{ width:min(84vw,292px) !important; max-width:292px !important; } }