/* Imaginator AI — conversion landing (premium, warm-black + gold). Recreated from design_handoff_landing/reference. */ /* Tokens: terracotta-gold over warm black (dark) + warm paper (light). Superset — includes the names the shared chrome.css consumes, since on the landing this file is the token source. Switch via data-theme on . */ :root, [data-theme="dark"]{ --bg:#161210; --bg-2:#1E1813; --surface:#1E1813; --surface-2:#262019; --surface-3:#2e2620; --card:rgba(244,236,224,.04); --card-2:rgba(244,236,224,.06); --line:rgba(244,236,224,.10); --line-2:rgba(244,236,224,.20); --line-soft:rgba(244,236,224,.08); --text:#F4ECE0; --text-strong:#F8F2E8; --muted:rgba(244,236,224,.66); --faint:rgba(244,236,224,.5); --text-muted:rgba(244,236,224,.66); --text-faint:rgba(244,236,224,.5); --acc-1:#E8A063; --acc-2:#C9714E; --acc-3:#9A4F32; --accent:#E8A063; --accent-2:#C9714E; --accent-soft:rgba(232,160,99,.12); --accent-soft-2:rgba(232,160,99,.14); --accent-line:rgba(232,160,99,.22); --ink:#1a100a; --on-accent:#1a100a; --btn:linear-gradient(180deg,#E8A063,#C9714E); --btn-shadow:0 18px 40px -16px rgba(232,160,99,.7); --glow:rgba(232,160,99,.26); --nav-scrolled:rgba(22,18,16,.82); --disp:"Cormorant Garamond",Georgia,serif; --ui:"Manrope",-apple-system,system-ui,sans-serif; --maxw:1240px; --r:22px; --r-lg:30px; --ease:cubic-bezier(.2,.7,.2,1); } [data-theme="light"]{ --bg:#F6EFE4; --bg-2:#FBF5EA; --surface:#FFFCF7; --surface-2:#FBF5EA; --surface-3:#F2E9DB; --card:#FFFCF7; --card-2:#FBF5EA; --line:rgba(42,33,28,.12); --line-2:rgba(42,33,28,.20); --line-soft:rgba(42,33,28,.08); --text:#2A211C; --text-strong:#1B1410; --muted:#6E635A; --faint:#8A7D73; --text-muted:#6E635A; --text-faint:#8A7D73; --acc-1:#C9714E; --acc-2:#9A4F32; --acc-3:#7d3f28; --accent:#C9714E; --accent-2:#9A4F32; --accent-soft:rgba(201,113,78,.08); --accent-soft-2:rgba(201,113,78,.12); --accent-line:rgba(201,113,78,.28); --ink:#FFFFFF; --on-accent:#FFFFFF; --btn:linear-gradient(180deg,#C9714E,#9A4F32); --btn-shadow:0 18px 40px -16px rgba(201,113,78,.55); --glow:rgba(201,113,78,.16); --nav-scrolled:rgba(246,239,228,.85); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body.lp{ margin:0; background:var(--bg); color:var(--text); font-family:var(--ui); font-size:18px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .35s ease, color .35s ease; } .lp img{ display:block; max-width:100%; } .lp a{ color:inherit; text-decoration:none; } .lp .wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; } .lp section{ position:relative; } /* ambient warm field */ body.lp::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(60% 40% at 78% -5%, var(--glow), transparent 60%), radial-gradient(50% 35% at 8% 8%, rgba(220,166,66,.10), transparent 65%); } .lp main,.lp header,.lp footer{ position:relative; z-index:1; } /* ---------- type ---------- */ .lp .eyebrow{ display:inline-flex; align-items:center; gap:11px; font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--acc-1); } .lp .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--acc-1); box-shadow:0 0 14px var(--glow); } .lp .gold{ background:linear-gradient(110deg,var(--acc-1),var(--acc-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .lp .h-sec{ font-family:var(--disp); font-size:clamp(36px,4.6vw,58px); font-weight:600; line-height:1.04; letter-spacing:-.01em; margin:0; color:var(--text-strong); text-wrap:balance; } .lp .sub{ font-size:clamp(18px,1.5vw,22px); color:var(--muted); margin:18px 0 0; max-width:62ch; text-wrap:pretty; } .lp .tnum{ font-variant-numeric:tabular-nums; } /* ---------- buttons ---------- */ .lp .btn{ display:inline-flex; align-items:center; justify-content:center; gap:11px; font-size:18px; font-weight:700; padding:18px 30px; border-radius:999px; cursor:pointer; border:none; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; white-space:nowrap; } .lp .btn.lg{ padding:21px 38px; font-size:19px; } .lp .btn-primary{ background:linear-gradient(110deg,var(--acc-1),var(--acc-2)); color:var(--ink); box-shadow:0 12px 38px var(--glow); } .lp .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 50px var(--glow); } .lp .btn-ghost{ background:var(--card); color:var(--text); border:1px solid var(--line); } .lp .btn-ghost:hover{ border-color:var(--accent-line); transform:translateY(-2px); } .lp .btn .arr{ font-size:20px; } /* ---------- nav ---------- */ .lp .nav{ position:sticky; top:0; z-index:40; } .lp .nav-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; margin-top:14px; padding:0 20px 0 22px; border:1px solid var(--line); border-radius:999px; background:rgba(18,14,8,.6); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); } .lp .brand{ display:flex; align-items:center; gap:13px; font-weight:700; font-size:21px; letter-spacing:-.01em; } .lp .swirl{ width:38px; height:38px; border-radius:50%; position:relative; background:conic-gradient(from 210deg,var(--acc-3),var(--acc-1),#fff6dd,var(--acc-2),var(--acc-3)); box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25), 0 0 22px var(--glow); } .lp .swirl::after{ content:""; position:absolute; inset:33%; border-radius:50%; background:var(--bg); } .lp .nav-links{ display:flex; gap:34px; font-size:16px; color:var(--muted); } .lp .nav-links a{ transition:color .2s; } .lp .nav-links a:hover{ color:var(--text); } .lp .nav-cta{ display:flex; align-items:center; gap:14px; } .lp .nav .btn{ padding:13px 24px; font-size:16px; } /* ---------- hero ---------- */ .lp .hero{ padding:128px 0 40px; } .lp .hero-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; } .lp .hero h1{ font-family:var(--disp); font-size:clamp(46px,6.2vw,88px); font-weight:600; line-height:.96; letter-spacing:-.01em; margin:26px 0 0; color:var(--text-strong); text-wrap:balance; } .lp .hero h1 .gold, .lp .final h2 .gold{ background:none; -webkit-text-fill-color:var(--accent); color:var(--accent); font-style:italic; font-weight:500; } .lp .hero .sub{ font-size:clamp(19px,1.55vw,23px); margin-top:24px; max-width:30ch; } .lp .hero-cta{ display:flex; align-items:center; gap:16px; margin-top:36px; flex-wrap:wrap; } .lp .trust{ display:flex; align-items:center; gap:20px; margin-top:22px; color:var(--faint); font-size:15.5px; flex-wrap:wrap; } .lp .trust span{ display:inline-flex; align-items:center; gap:8px; } .lp .trust .ic{ color:var(--acc-1); } /* before / after slider */ .lp .ba{ position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2); box-shadow:0 40px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03) inset; user-select:none; } .lp .ba .layer{ position:absolute; inset:0; } .lp .ba .after{ clip-path:inset(0 var(--clip,50%) 0 0); } .lp .ba .layer img{ width:100%; height:100%; object-fit:cover; } .lp .ba .tag{ position:absolute; top:18px; z-index:3; font-size:14px; font-weight:700; letter-spacing:.04em; padding:8px 15px; border-radius:999px; } .lp .ba .tag.l{ left:18px; background:rgba(16,12,7,.62); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .lp .ba .tag.r{ right:18px; background:linear-gradient(110deg,var(--acc-1),var(--acc-2)); color:var(--ink); } .lp .ba .divider{ position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px; z-index:4; background:linear-gradient(var(--acc-1),var(--acc-2)); transform:translateX(-1px); } .lp .ba .knob{ position:absolute; top:50%; left:var(--pos,50%); z-index:5; width:52px; height:52px; border-radius:50%; transform:translate(-50%,-50%); background:rgba(16,12,7,.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1.5px solid var(--acc-1); display:flex; align-items:center; justify-content:center; cursor:ew-resize; box-shadow:0 6px 24px rgba(0,0,0,.45); color:var(--acc-1); font-size:18px; } .lp .ba .float{ position:absolute; right:18px; bottom:18px; z-index:3; padding:10px 16px; border-radius:14px; background:rgba(16,12,7,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line-2); font-size:14px; color:var(--muted); } /* ---------- proof strip ---------- */ .lp .proof{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:30px; } .lp .proof-inner{ display:flex; justify-content:space-between; gap:24px; padding:30px 0; flex-wrap:wrap; } .lp .proof .it{ display:flex; flex-direction:column; gap:4px; } .lp .proof .fig{ font-size:34px; font-weight:800; letter-spacing:-.02em; } .lp .proof .lab{ font-size:15px; color:var(--muted); } /* ---------- generic section header ---------- */ .lp .sec{ padding:108px 0; } .lp .sec-head{ max-width:760px; margin-bottom:54px; } .lp .sec-head .eyebrow{ margin-bottom:18px; } /* ---------- comparison ---------- */ .lp .cmp{ display:grid; grid-template-columns:1.3fr 1fr 1fr; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; } .lp .cmp .row{ display:contents; } .lp .cmp .cell{ padding:26px 28px; border-top:1px solid var(--line); font-size:18px; } .lp .cmp .head .cell{ border-top:none; } .lp .cmp .cell.label{ color:var(--muted); font-weight:500; } .lp .cmp .cell.studio{ color:var(--faint); } .lp .cmp .cell.us{ color:var(--text); font-weight:600; background:linear-gradient(180deg,rgba(247,210,122,.06),transparent); } .lp .cmp .col-title{ font-size:21px; font-weight:800; } .lp .cmp .col-title.us{ color:var(--acc-1); } /* ---------- gallery ---------- */ .lp .gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .lp .gcell{ position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); aspect-ratio:3/4; transition:transform .3s var(--ease); } .lp .gcell.tall{ grid-row:span 2; aspect-ratio:3/5; } .lp .gcell:hover{ transform:translateY(-4px); } .lp .gcell img{ width:100%; height:100%; object-fit:cover; } .lp .gcell .lab{ position:absolute; left:14px; bottom:14px; z-index:2; font-size:15px; font-weight:600; color:#fff; padding:7px 14px; border-radius:999px; background:rgba(16,12,7,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12); } /* ---------- steps ---------- */ .lp .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .lp .step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:34px; } .lp .step .n{ font-size:17px; font-weight:700; color:var(--acc-1); letter-spacing:.1em; } .lp .step h3{ font-size:24px; font-weight:700; margin:16px 0 10px; } .lp .step p{ font-size:16.5px; color:var(--muted); margin:0; } /* ---------- use cases ---------- */ .lp .uses{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .lp .use{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px; transition:border-color .2s, transform .2s var(--ease); } .lp .use:hover{ border-color:var(--line-2); transform:translateY(-3px); } .lp .use .ic{ font-size:30px; } .lp .use h4{ font-size:20px; font-weight:700; margin:18px 0 8px; } .lp .use p{ font-size:15.5px; color:var(--muted); margin:0; } /* ---------- scenarios (choose-a-task grid) ---------- */ .lp .scen-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .lp .scen{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px; transition:border-color .2s, transform .2s var(--ease); } .lp .scen:hover{ border-color:var(--line-2); transform:translateY(-3px); } .lp .scen .ic{ font-size:30px; } .lp .scen h4{ font-size:20px; font-weight:700; margin:16px 0 8px; } .lp .scen p{ font-size:15.5px; color:var(--muted); margin:0 0 16px; } .lp .scen-cta{ margin-top:auto; color:var(--acc-1); font-weight:700; font-size:15px; } @media (max-width:1000px){ .lp .scen-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .lp .scen-grid{ grid-template-columns:1fr; } } /* ---------- pricing ---------- */ .lp .price{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; } .lp .tier{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px; } .lp .tier.feat{ background:linear-gradient(180deg,var(--surface-2),var(--surface)); border-color:var(--line-2); box-shadow:0 26px 70px rgba(0,0,0,.4); transform:translateY(-8px); } .lp .tier .badge{ align-self:flex-start; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); background:linear-gradient(110deg,var(--acc-1),var(--acc-2)); padding:6px 14px; border-radius:999px; margin-bottom:16px; } .lp .tier .tname{ font-size:22px; font-weight:700; } .lp .tier .tprice{ font-size:48px; font-weight:800; letter-spacing:-.02em; margin:6px 0 2px; } .lp .tier .tper{ font-size:16px; color:var(--acc-1); font-weight:600; } .lp .tier ul{ list-style:none; margin:22px 0 26px; padding:0; display:flex; flex-direction:column; gap:13px; } .lp .tier li{ font-size:16px; color:var(--muted); display:flex; gap:11px; } .lp .tier li::before{ content:"✓"; color:var(--acc-1); font-weight:800; } .lp .tier .btn{ margin-top:auto; width:100%; } .lp .price-note{ text-align:center; margin-top:26px; color:var(--muted); font-size:16px; } .lp .price-note b{ color:var(--acc-1); } /* result-package storefront (sold by outcome, N cards) */ .lp .packs-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; align-items:stretch; } .lp .pack-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px; position:relative; transition:transform .2s var(--ease), border-color .2s; } .lp .pack-card:hover{ transform:translateY(-3px); border-color:var(--line-2); } .lp .pack-card.feat{ background:linear-gradient(180deg,var(--surface-2),var(--surface)); border-color:var(--line-2); box-shadow:0 26px 70px rgba(0,0,0,.4); } .lp .pack-card .badge{ align-self:flex-start; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); background:linear-gradient(110deg,var(--acc-1),var(--acc-2)); padding:5px 12px; border-radius:999px; margin-bottom:14px; } .lp .pack-card .tname{ font-size:21px; font-weight:700; } .lp .pack-card .pcount{ font-size:15px; color:var(--acc-1); font-weight:600; margin-top:4px; } .lp .pack-card .pblurb{ font-size:15px; color:var(--muted); margin:12px 0 18px; flex:1; } .lp .pack-card .tprice{ font-size:34px; font-weight:800; letter-spacing:-.02em; margin:0 0 16px; } .lp .pack-card .btn{ width:100%; } /* ---------- viral ---------- */ .lp .viral{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; background:linear-gradient(120deg,var(--surface-2),var(--surface)); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:54px; overflow:hidden; } .lp .viral .steps3{ display:flex; flex-direction:column; gap:18px; margin-top:8px; } .lp .viral .vrow{ display:flex; gap:16px; align-items:center; } .lp .viral .vn{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; background:var(--surface-3); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--acc-1); } .lp .viral .vrow p{ margin:0; font-size:17px; } .lp .viral-art{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:radial-gradient(circle at 50% 30%,rgba(247,210,122,.12),transparent 70%); border-radius:var(--r); padding:40px; min-height:240px; } .lp .viral-art .big{ font-size:64px; font-weight:800; letter-spacing:-.03em; } /* ---------- faq ---------- */ .lp .faq{ max-width:880px; margin:0 auto; } .lp .qa{ border-bottom:1px solid var(--line); } .lp .qa summary{ list-style:none; cursor:pointer; padding:26px 4px; display:flex; justify-content:space-between; gap:24px; font-size:21px; font-weight:600; align-items:center; } .lp .qa summary::-webkit-details-marker{ display:none; } .lp .qa .pm{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2); color:var(--acc-1); display:flex; align-items:center; justify-content:center; font-size:20px; transition:transform .25s var(--ease); } .lp .qa[open] .pm{ transform:rotate(45deg); } .lp .qa .ans{ padding:0 4px 26px; color:var(--muted); font-size:17px; max-width:70ch; } /* ---------- final cta ---------- */ .lp .final{ text-align:center; padding:120px 0; } .lp .final h2{ font-family:var(--disp); font-size:clamp(42px,5.4vw,78px); font-weight:600; letter-spacing:-.01em; line-height:1.0; margin:22px 0 0; color:var(--text-strong); text-wrap:balance; } .lp .final .sub{ margin:22px auto 0; } .lp .final .hero-cta{ justify-content:center; margin-top:40px; } /* ---------- footer ---------- */ .lp .foot{ border-top:1px solid var(--line); padding:54px 0 40px; color:var(--muted); font-size:15.5px; } .lp .foot-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:36px; } .lp .foot-cols{ display:flex; gap:64px; flex-wrap:wrap; } .lp .foot-col h5{ font-size:14px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin:0 0 16px; font-weight:600; } .lp .foot-col a{ display:block; margin-bottom:10px; transition:color .2s; } .lp .foot-col a:hover{ color:var(--text); } .lp .foot-legal{ font-size:13.5px; color:var(--faint); line-height:1.6; border-top:1px solid var(--line); padding-top:24px; } /* sticky mobile cta */ .lp .sticky-cta{ display:none; } /* ---------- reveal ---------- */ @media (prefers-reduced-motion:no-preference){ .lp .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .lp .reveal.in{ opacity:1; transform:none; } } /* ---------- responsive ---------- */ @media (max-width:1000px){ .lp .hero-grid{ grid-template-columns:1fr; gap:40px; } .lp .ba{ max-width:460px; } .lp .cmp{ grid-template-columns:1.2fr .9fr .9fr; } .lp .gal{ grid-template-columns:repeat(2,1fr); } .lp .gcell.tall{ grid-row:auto; aspect-ratio:3/4; } .lp .uses{ grid-template-columns:repeat(2,1fr); } .lp .viral{ grid-template-columns:1fr; padding:40px; } } @media (max-width:720px){ body.lp{ font-size:17px; } .lp .wrap{ padding:0 20px; } .lp .nav-links{ display:none; } .lp .nav-inner{ height:64px; } .lp .sec{ padding:74px 0; } .lp .steps,.lp .price{ grid-template-columns:1fr; } .lp .tier.feat{ transform:none; } .lp .cmp{ grid-template-columns:1fr; } .lp .cmp .cell{ padding:16px 18px; font-size:16px; } .lp .cmp .head{ display:none; } .lp .cmp .row{ display:grid; grid-template-columns:1fr auto auto; border-top:1px solid var(--line); } .lp .cmp .cell{ border-top:none; } .lp .price{ gap:18px; } .lp .hero-cta .btn{ width:100%; } .lp .sticky-cta{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:50; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--nav-scrolled); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--line); } .lp .sticky-cta .btn{ width:100%; } .lp .nav-cta .btn-ghost{ display:none; } } /* ---------- living wall (marquee) ---------- */ @keyframes lpMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } } .lp .wall{ padding:20px 0 80px; overflow:hidden; } .lp .wall-head{ text-align:center; max-width:760px; margin:0 auto 30px; padding:0 20px; } .lp .wall-rows{ display:flex; flex-direction:column; gap:16px; } .lp .wall-row{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .lp .wall-track{ display:flex; gap:16px; width:max-content; padding:0 8px; animation:lpMarquee 46s linear infinite; } .lp .wall-track.r{ animation-duration:54s; animation-direction:reverse; } .lp .wall:hover .wall-track{ animation-play-state:paused; } .lp .wall-card{ display:block; width:186px; aspect-ratio:3/4; border-radius:16px; position:relative; flex:0 0 auto; overflow:hidden; background:var(--surface-2); text-decoration:none; color:inherit; transition:transform .2s var(--ease,ease); } .lp .wall-card:hover{ transform:translateY(-4px); } .lp .wall-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .lp .wall-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,12,8,.62), transparent 52%); pointer-events:none; } .lp .wall-card span{ position:absolute; left:13px; bottom:11px; z-index:2; font:800 13px/1 'Manrope',sans-serif; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6); } @media (prefers-reduced-motion:reduce){ .lp .wall-track{ animation:none; } } /* ---------- two services ---------- */ .lp .services{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } .lp .svc{ padding:44px; border-radius:26px; } .lp .svc.a{ background:var(--accent-soft); border:1px solid var(--accent-line); } .lp .svc.b{ background:var(--surface); border:1px solid var(--line); } .lp .svc .ov{ font:800 11px/1 'Manrope',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); } .lp .svc.b .ov{ color:var(--faint); } .lp .svc h3{ font-family:var(--disp); font-weight:600; font-size:38px; line-height:1.04; margin:16px 0 12px; color:var(--text-strong); } .lp .svc p{ font-size:16px; color:var(--muted); margin:0 0 22px; } .lp .svc .chips{ display:flex; gap:8px; flex-wrap:wrap; } .lp .svc .chip{ padding:8px 14px; border-radius:999px; font:700 13px/1 'Manrope',sans-serif; } .lp .svc.a .chip{ background:var(--accent-soft-2); color:var(--accent); } .lp .svc.b .chip{ background:var(--card-2); color:var(--text); } @media (max-width:760px){ .lp .services{ grid-template-columns:1fr; } .lp .svc{ padding:32px 24px; } } /* ---------- studio brand band ---------- */ .lp .studioband{ border-radius:30px; overflow:hidden; padding:56px; background:radial-gradient(80% 120% at 100% 0%, rgba(232,160,99,.2), transparent 55%), linear-gradient(135deg,#221a14,#3a241a); border:1px solid rgba(232,160,99,.16); } .lp .studioband-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:44px; align-items:center; } .lp .studioband .ov{ font:800 11px/1 'Manrope',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#E8A063; } .lp .studioband h2{ font-family:var(--disp); font-weight:600; font-size:40px; line-height:1.04; color:#F8F2E8; margin:18px 0 14px; } .lp .studioband p{ font-size:17px; color:rgba(244,236,224,.68); margin:0 0 28px; } .lp .studioband .sb-btn{ background:linear-gradient(180deg,#E8A063,#C9714E); color:#1a100a; border:none; padding:15px 28px; border-radius:999px; font:800 15px/1 'Manrope',sans-serif; cursor:pointer; text-decoration:none; display:inline-block; } .lp .studioband .feats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .lp .studioband .feat{ padding:20px; border-radius:16px; background:rgba(244,236,224,.06); border:1px solid rgba(244,236,224,.1); font:800 14px/1.3 'Manrope',sans-serif; color:#F8F2E8; } @media (max-width:760px){ .lp .studioband{ padding:36px 24px; } .lp .studioband-grid{ grid-template-columns:1fr; gap:28px; } }