/* ========================================================== PALETTE — sampled from the new logo Yellow #FFD829 · Sun #FCCC00 · Pink #8B4DE0 Magenta #5A18A8 · Plum #0C123C · Slate #4A5170 Cream #FFFDF5 — the page never goes black ========================================================== */ :root{ /* ===== PALETTE — sampled from the Ammesthaam vector logo ===== Yellow #FCCC00 · Purple #5A18A8 · Navy #0C123C Ink #17204C · Skin #FCC07E · Grey #727272 ============================================================ */ --navy:#0C123C; --navy-2:#060A26; --ink-line:#17204C; --purple:#5A18A8; --purple-lt:#8B4DE0; --purple-hi:#AA43F3; --gold:#FCCC00; --gold-hi:#FFD829; --gold-lo:#FFF3C4; /* names kept so the rest of the stylesheet keeps working */ --plum:#0C123C; /* dark brand — headings, dark bands */ --plum-2:#060A26; --magenta:#5A18A8; /* primary accent */ --pink:#8B4DE0; /* secondary accent */ --sun:#FCCC00; --yellow:#FFD829; --dome:#3D2A7A; --bangle:#AA43F3; --cream:#FFFDF5; --blush:#F2ECFF; --slate:#4A5170; --grey:#727272; --ink:#17204C; --soft:#565C7A; --disp:"Fredoka",system-ui,sans-serif; --body:"Instrument Sans",system-ui,sans-serif; --pad:clamp(18px,4.5vw,64px); --r:26px; --sh:0 10px 0 rgba(12,18,60,.16); --sh-lg:0 16px 0 rgba(12,18,60,.18); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; } body.lock{ overflow:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; } button{ font:inherit; cursor:pointer; } :focus-visible{ outline:3px solid var(--magenta); outline-offset:3px; border-radius:8px; } .wrap{ max-width:1180px; margin:0 auto; padding-inline:var(--pad); position:relative; z-index:2; } section{ padding-block:clamp(58px,7.5vw,110px); position:relative; } /* ===== TYPE ===== */ .d{ font-family:var(--disp); font-weight:700; line-height:.98; letter-spacing:-.015em; margin:0; text-transform:uppercase; } .d-xl{ font-size:clamp(40px,8.4vw,104px); } .d-lg{ font-size:clamp(31px,5.4vw,66px); } .grad{ background:linear-gradient(100deg,var(--purple) 0%,var(--purple) 34%,var(--purple-hi) 68%,var(--gold) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .tag{ display:inline-flex; align-items:center; gap:8px; margin:0 0 18px; font-family:var(--disp); font-weight:600; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; background:var(--sun); color:var(--plum); border-radius:100px; padding:7px 16px; box-shadow:0 4px 0 rgba(12,18,60,.18); } .tag svg{ width:13px; height:13px; } .lede{ font-size:clamp(16px,1.9vw,19.5px); color:var(--soft); max-width:54ch; margin:16px 0 0; } .spark{ display:inline-block; fill:currentColor; vertical-align:middle; width:12px; height:12px; flex:0 0 12px; } svg.spark{ max-width:12px; max-height:12px; } .tag .spark{ width:13px; height:13px; flex-basis:13px; } .mq .spark{ width:15px; height:15px; flex-basis:15px; } /* ===== BANDS ===== */ .b-blush{ background:var(--blush); } .b-sun{ background:linear-gradient(150deg,var(--sun),#FFC93B); } .b-plum{ background:linear-gradient(150deg,var(--plum),var(--plum-2)); color:#FFE9F1; } .b-plum .lede{ color:#C7CBE0; } .b-plum .tag{ background:var(--yellow); } .b-pink{ background:linear-gradient(150deg,var(--pink),var(--magenta)); color:#fff; } .b-pink .lede{ color:rgba(255,255,255,.86); } .b-pink .tag{ background:var(--yellow); } /* ===== BUTTONS ===== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--disp); font-weight:600; font-size:16px; padding:15px 28px; border-radius:100px; text-decoration:none; border:0; background:linear-gradient(120deg,var(--magenta),var(--pink)); color:#fff; box-shadow:0 6px 0 var(--plum); transition:transform .12s, box-shadow .12s; } .btn:hover{ transform:translateY(3px); box-shadow:0 3px 0 var(--plum); } .btn:active{ transform:translateY(6px); box-shadow:0 0 0 var(--plum); } .btn-sun{ background:linear-gradient(120deg,var(--yellow),var(--sun)); color:var(--plum); box-shadow:0 6px 0 #B08E00; } .btn-sun:hover{ box-shadow:0 3px 0 #B08E00; } .btn-out{ background:transparent; color:var(--plum); box-shadow:inset 0 0 0 3px var(--plum); } .btn-out:hover{ background:var(--plum); color:var(--cream); box-shadow:inset 0 0 0 3px var(--plum); transform:none; } .b-plum .btn-out,.b-pink .btn-out{ color:#fff; box-shadow:inset 0 0 0 3px rgba(255,255,255,.6); } .b-plum .btn-out:hover,.b-pink .btn-out:hover{ background:#fff; color:var(--plum); } .btn-sm{ padding:10px 20px; font-size:14.5px; box-shadow:0 4px 0 var(--plum); } .btn-sm:hover{ box-shadow:0 2px 0 var(--plum); } /* ===== GATE ===== */ .gate{ position:fixed; inset:0; z-index:150; background:linear-gradient(160deg,var(--cream),var(--blush)); display:grid; place-items:center; padding:26px; text-align:center; transition:opacity .45s, visibility .45s; } .gate.gone{ opacity:0; visibility:hidden; } .gate-in{ max-width:560px; width:100%; } .gate img{ height:clamp(38px,6.4vw,62px); width:auto; margin:0 auto 16px; } .gate .what{ font-family:var(--disp); font-weight:500; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin:0; } .gate h1{ font-size:clamp(24px,3.6vw,38px); color:var(--plum); margin:0; } .picks{ display:grid; gap:12px; margin-top:30px; } @media(min-width:560px){ .picks{ grid-template-columns:repeat(3,1fr); } } .pick{ background:#fff; border:0; border-radius:100px; padding:18px 16px; box-shadow:0 6px 0 rgba(12,18,60,.18); transition:transform .14s, box-shadow .14s, background .14s; } .pick:hover{ transform:translateY(-4px); box-shadow:0 10px 0 rgba(12,18,60,.2); background:var(--sun); } .pick .n{ display:block; font-family:var(--disp); font-weight:700; font-size:21px; text-transform:uppercase; color:var(--plum); } .gate-note{ color:var(--soft); font-size:13.5px; margin-top:26px; max-width:44ch; margin-inline:auto; } /* ===== NAV ===== */ .nav{ position:sticky; top:0; z-index:90; background:transparent; transition:background .3s ease, box-shadow .3s ease; } .nav.tight{ background:rgba(255,247,236,.95); backdrop-filter:blur(10px); box-shadow:0 4px 18px rgba(12,18,60,.08); } .rail{ height:6px; background:linear-gradient(90deg,var(--yellow),var(--pink),var(--magenta),var(--yellow)); background-size:200% 100%; animation:railshift 9s linear infinite; } @keyframes railshift{ from{ background-position:0 0; } to{ background-position:200% 0; } } .nav-in{ max-width:1180px; margin:0 auto; padding:12px var(--pad); display:flex; align-items:center; justify-content:flex-end; gap:12px; transition:padding .22s ease; } .nav.tight .nav-in{ justify-content:space-between; } .nav.tight .nav-in{ padding-block:6px; } .brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; opacity:0; visibility:hidden; transform:translateY(-12px) scale(.94); transform-origin:left center; pointer-events:none; transition:opacity .3s ease, transform .34s cubic-bezier(.2,.8,.3,1), visibility .34s; } .nav.tight .brand{ opacity:1; visibility:visible; transform:none; pointer-events:auto; } .nav-logo{ height:26px; width:auto; } @media(min-width:760px){ .nav-logo{ height:30px; } } .nav-links{ display:none; gap:20px; align-items:center; } .nav-links a{ text-decoration:none; font-family:var(--disp); font-weight:500; font-size:14px; color:var(--soft); } .nav-links a:hover,.nav-links a[aria-current="true"]{ color:var(--magenta); } @media(min-width:1090px){ .nav-links{ display:flex; } .burger{ display:none !important; } } .nav-right{ display:flex; align-items:center; gap:9px; } .lang{ display:flex; background:#fff; border-radius:100px; padding:3px; box-shadow:0 3px 0 rgba(12,18,60,.12); } .lang button{ background:transparent; border:0; color:var(--soft); font-family:var(--disp); font-weight:600; font-size:12px; padding:6px 11px; border-radius:100px; } .lang button[aria-pressed="true"]{ background:linear-gradient(120deg,var(--magenta),var(--pink)); color:#fff; } .burger{ width:42px; height:38px; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:0 9px; background:#fff; border:0; border-radius:12px; box-shadow:0 3px 0 rgba(12,18,60,.14); } .burger span{ height:3px; border-radius:3px; background:var(--plum); transition:.2s; } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); } .drawer{ position:fixed; inset:0; z-index:89; background:linear-gradient(160deg,var(--cream),var(--blush)); padding:96px var(--pad) 40px; opacity:0; visibility:hidden; transition:.25s; overflow-y:auto; } .drawer.open{ opacity:1; visibility:visible; } .drawer a{ display:block; text-decoration:none; font-family:var(--disp); font-weight:700; font-size:clamp(26px,7.5vw,40px); text-transform:uppercase; padding:13px 0; border-bottom:2px solid rgba(12,18,60,.1); } .drawer a:hover{ color:var(--magenta); } /* ===== HERO ===== */ .hero{ padding-block:clamp(38px,6vw,74px) clamp(30px,4vw,52px); overflow:hidden; } .blob{ position:absolute; border-radius:50%; filter:blur(46px); opacity:.5; pointer-events:none; } .blob-1{ width:44vw; height:44vw; max-width:520px; max-height:520px; background:var(--sun); top:-14%; right:-10%; } .blob-2{ width:38vw; height:38vw; max-width:440px; max-height:440px; background:var(--pink); bottom:-22%; left:-12%; } .hero-logo{ width:100%; max-width:660px; height:auto; margin:0 auto; } .board{ position:relative; display:block; width:100%; background:#fff; border:6px solid var(--plum); border-radius:26px; padding:clamp(34px,5vw,52px) clamp(28px,5vw,56px) clamp(24px,3.4vw,34px); box-shadow:0 14px 0 rgba(12,18,60,.22); transform:rotate(-1deg); margin-bottom:clamp(30px,4vw,46px); } .board .ribbon{ position:absolute; top:-15px; left:50%; transform:translateX(-50%) rotate(-2deg); background:linear-gradient(120deg,var(--magenta),var(--pink)); color:#fff; font-family:var(--disp); font-weight:700; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; padding:6px 18px; border-radius:100px; box-shadow:0 4px 0 var(--plum); white-space:nowrap; } .board .strip{ display:block; margin-top:18px; text-align:center; font-family:var(--disp); font-weight:600; font-size:clamp(12.5px,1.6vw,16px); letter-spacing:.06em; text-transform:uppercase; color:var(--soft); } .board .strip b{ color:var(--magenta); } .bl{ position:absolute; animation:chase 1.5s linear infinite; } .bl-t,.bl-b{ left:14px; right:14px; height:10px; background-image:radial-gradient(circle,var(--sun) 3.4px,rgba(255,216,20,.22) 3.8px,transparent 4.2px); background-size:22px 10px; } .bl-t{ top:9px; } .bl-b{ bottom:9px; } .bl-l,.bl-r{ top:14px; bottom:14px; width:10px; background-image:radial-gradient(circle,var(--sun) 3.4px,rgba(255,216,20,.22) 3.8px,transparent 4.2px); background-size:10px 22px; animation-name:chase-y; } .bl-l{ left:9px; } .bl-r{ right:9px; } @keyframes chase{ to{ background-position:22px 0; } } @keyframes chase-y{ to{ background-position:0 22px; } } .hero h1{ margin:0; } .hero-sub{ font-family:var(--disp); font-weight:500; font-size:clamp(18px,2.4vw,26px); color:var(--plum); margin:20px 0 0; max-width:24ch; } .hero-plain{ font-size:15.5px; color:var(--soft); margin:14px 0 0; max-width:52ch; } .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; } .confetti{ position:absolute; color:var(--slate); opacity:.7; pointer-events:none; } .does{ font-family:var(--disp); font-weight:500; font-size:clamp(17px,2.2vw,23px); line-height:1.35; color:var(--plum); max-width:34ch; margin:0 auto clamp(16px,2vw,22px); text-align:center; } .does b{ font-weight:700; color:var(--magenta); } .does-pills{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:clamp(28px,3.6vw,42px); } .does-pills span{ font-family:var(--disp); font-weight:600; font-size:12.5px; letter-spacing:.04em; background:#fff; color:var(--plum); border-radius:100px; padding:7px 15px; box-shadow:0 4px 0 rgba(12,18,60,.14); } .does-pills span:nth-child(3n+2){ background:var(--sun); } .does-pills span:nth-child(3n+3){ background:var(--blush); } /* ===== MARQUEE ===== */ .mq{ background:var(--plum); color:var(--yellow); overflow:hidden; padding:13px 0; white-space:nowrap; } .mq-in{ display:inline-flex; gap:20px; align-items:center; animation:roll 40s linear infinite; } .mq:hover .mq-in{ animation-play-state:paused; } .mq span{ font-family:var(--disp); font-weight:600; font-size:clamp(14px,1.9vw,20px); text-transform:uppercase; } .mq .spark{ width:15px; height:15px; color:var(--pink); } @keyframes roll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} } /* ===== PLAIN BAND ===== */ .plain h2{ font-family:var(--disp); font-weight:700; font-size:clamp(22px,2.8vw,34px); text-transform:uppercase; margin:0 0 22px; color:var(--plum); } .plain-grid{ display:grid; gap:14px; } @media(min-width:700px){ .plain-grid{ grid-template-columns:repeat(4,1fr); } } .pcell{ background:rgba(255,255,255,.62); border-radius:20px; padding:20px 18px; } .pcell strong{ display:block; font-family:var(--disp); font-weight:700; font-size:20px; text-transform:uppercase; color:var(--plum); } .pcell span{ font-size:14.5px; color:#4A3B00; } /* ===== REVEAL ===== */ .rv{ opacity:1; } .rv.in{ animation:riseIn .6s cubic-bezier(.2,.75,.3,1) both; animation-delay:calc(var(--i,0)*65ms); } /* ===== CREW ===== */ .crew{ display:grid; gap:14px; margin-top:40px; } @media(min-width:600px){ .crew{ grid-template-columns:repeat(2,1fr); } } @media(min-width:960px){ .crew{ grid-template-columns:repeat(3,1fr); } } .cm{ background:#fff; border-radius:22px; padding:24px 22px; box-shadow:var(--sh); transition:transform .16s, box-shadow .16s; } .cm:hover{ transform:translateY(-6px) rotate(-.7deg); box-shadow:var(--sh-lg); } .cm .ic{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; margin-bottom:14px; background:var(--blush); color:var(--magenta); } .cm:nth-child(3n+2) .ic{ background:#FFF3C4; color:#B08E00; } .cm:nth-child(3n+3) .ic{ background:#E7EAF7; color:var(--slate); } .cm .ic svg{ width:26px; height:26px; } .cm h3{ font-family:var(--disp); font-weight:700; font-size:21px; text-transform:uppercase; margin:0 0 4px; color:var(--plum); } .cm p{ margin:0; font-size:14.5px; color:var(--soft); } /* ===== CHARACTERS ===== */ .ch{ display:block; width:100%; height:auto; } .ch-wrap{ position:relative; margin:-6px 0 16px; } .ch-wrap .ch{ max-width:180px; margin-inline:auto; } .hero-art{ position:relative; } .hero-art .ch{ max-width:min(88%,420px); margin-inline:auto; animation:float 7s ease-in-out infinite; } @keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } } .hero-grid{ display:grid; gap:30px; align-items:center; } @media(min-width:940px){ .hero-grid{ grid-template-columns:1.06fr .94fr; gap:44px; } } .city-grid2{ display:grid; gap:32px; align-items:center; margin-top:36px; } @media(min-width:880px){ .city-grid2{ grid-template-columns:.62fr 1fr; } } .city-grid2 .ch{ max-width:min(78%,300px); margin-inline:auto; } @keyframes wiggle{ 0%,100%{ transform:rotate(0); } 30%{ transform:rotate(-3deg); } 65%{ transform:rotate(3deg); } } .promise-grid{ display:grid; gap:30px; align-items:center; } @media(min-width:880px){ .promise-grid{ grid-template-columns:1.15fr .85fr; gap:44px; } } .promise-grid .ch{ max-width:min(80%,340px); margin-inline:auto; } .ammu-badge{ display:none; width:36px; height:36px; flex-shrink:0; } @media(min-width:560px){ .ammu-badge{ display:block; } } .foot-brand{ display:flex; align-items:flex-start; gap:16px; } .foot-ammu{ width:74px; height:74px; flex-shrink:0; } /* ===== SERVICE CARDS ===== */ @media(min-width:680px){ .svcs{ grid-template-columns:repeat(2,1fr); } } @media(min-width:1060px){ .svcs{ grid-template-columns:repeat(4,1fr); } } @media(min-width:680px){ } /* ===== HYDERABAD ===== */ .city-words{ display:flex; flex-wrap:wrap; gap:10px; margin-top:36px; } .cw{ font-family:var(--disp); font-weight:600; font-size:clamp(15px,2vw,21px); text-transform:uppercase; background:rgba(255,255,255,.9); color:var(--plum); border-radius:100px; padding:8px 18px; box-shadow:0 5px 0 rgba(12,18,60,.15); transition:transform .14s; } .cw:hover{ transform:translateY(-4px) rotate(-1.5deg); } .cw:nth-child(3n+2){ background:var(--yellow); } .cw:nth-child(3n+3){ background:var(--plum); color:var(--yellow); } /* ===== PROCESS ===== */ .steps{ display:grid; gap:14px; margin-top:42px; } @media(min-width:900px){ .steps{ grid-template-columns:repeat(5,1fr); } } .st{ background:rgba(255,255,255,.14); border-radius:20px; padding:24px 20px; position:relative; } .st .n{ font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.14em; color:var(--yellow); text-transform:uppercase; } .st h3{ font-family:var(--disp); font-weight:700; font-size:24px; text-transform:uppercase; margin:6px 0 8px; color:#fff; } .st p{ margin:0; font-size:14.5px; color:#C7CBE0; } /* ===== PACKAGES ===== */ .packs{ display:grid; gap:20px; margin-top:44px; } @media(min-width:800px){ .packs{ grid-template-columns:repeat(3,1fr); } } .pk{ background:#fff; border-radius:var(--r); padding:30px 26px; box-shadow:var(--sh); text-align:center; transition:transform .16s, box-shadow .16s; } .pk:hover{ transform:translateY(-7px); box-shadow:var(--sh-lg); } .pk.hot{ background:linear-gradient(160deg,var(--yellow),var(--sun)); } .pk .rib{ display:inline-block; font-family:var(--disp); font-weight:600; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--magenta); } .pk h3{ font-family:var(--disp); font-weight:700; font-size:clamp(28px,3.2vw,38px); text-transform:uppercase; margin:8px 0 6px; color:var(--plum); } .pk .for{ font-size:15px; color:var(--soft); margin:0 0 20px; } .pk ul{ list-style:none; margin:0 0 22px; padding:0; text-align:left; font-size:15px; } .pk li{ display:flex; gap:9px; align-items:flex-start; padding:7px 0; color:var(--soft); } .pk li .spark{ width:12px; height:12px; margin-top:6px; color:var(--pink); flex-shrink:0; } .pk.hot .for,.pk.hot li{ color:#4A3B00; } .pk .btn{ width:100%; } .pk .price{ font-family:var(--disp); font-weight:700; font-size:clamp(32px,3.8vw,44px); line-height:1; color:var(--magenta); margin:2px 0 6px; letter-spacing:-.02em; } .pk .price span{ font-family:var(--body); font-weight:500; font-size:14px; color:var(--soft); letter-spacing:0; } .pk.hot .price{ color:var(--plum); } .pk.hot .price span{ color:#4A3B00; } .also{ display:grid; gap:14px; margin-top:26px; } @media(min-width:760px){ .also{ grid-template-columns:repeat(3,1fr); } } .also div{ background:#fff; border-radius:18px; padding:20px 20px; box-shadow:0 6px 0 rgba(12,18,60,.12); } .also strong{ display:block; font-family:var(--disp); font-weight:700; font-size:20px; color:var(--plum); margin-bottom:4px; } .also span{ font-size:14.5px; color:var(--soft); } /* ===== FAQ ===== */ .faq{ margin-top:40px; max-width:880px; display:grid; gap:12px; } details.q{ background:#fff; border-radius:20px; box-shadow:var(--sh); overflow:hidden; } details.q summary{ list-style:none; cursor:pointer; padding:20px 22px; display:flex; justify-content:space-between; gap:16px; align-items:center; font-family:var(--disp); font-weight:600; font-size:17.5px; color:var(--plum); } details.q summary::-webkit-details-marker{ display:none; } .pl{ flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--yellow); color:var(--plum); display:grid; place-items:center; font-weight:700; font-size:18px; transition:transform .2s, background .2s; } details.q[open] .pl{ transform:rotate(45deg); background:var(--magenta); color:#fff; } details.q p{ margin:0 22px 22px; font-size:15.5px; color:var(--soft); max-width:64ch; } /* ===== END ===== */ .end{ text-align:center; } .end .tag{ margin-inline:auto; } .end p{ font-size:18px; margin:20px auto 0; max-width:42ch; } .end-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px; } /* ===== FOOTER ===== */ .foot{ background:var(--plum); color:#C7CBE0; padding:52px 0 36px; } .foot-in{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; } .foot img{ height:52px; width:auto; margin-bottom:14px; } .foot p{ margin:0; font-size:14.5px; } .foot-links{ display:flex; flex-wrap:wrap; gap:18px; } .foot-links a{ font-family:var(--disp); font-weight:500; font-size:14px; color:#fff; text-decoration:none; } .foot-links a:hover{ color:var(--yellow); } .credits{ margin-top:36px; padding-top:20px; border-top:2px solid rgba(255,255,255,.16); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:13px; } .credits a{ color:var(--yellow); } .wa{ position:fixed; right:16px; bottom:16px; z-index:95; display:inline-flex; align-items:center; gap:9px; background:linear-gradient(120deg,var(--magenta),var(--pink)); color:#fff; text-decoration:none; font-family:var(--disp); font-weight:600; font-size:15.5px; padding:14px 22px; border-radius:100px; box-shadow:0 6px 0 var(--plum); transform:translateY(90px); opacity:0; transition:.3s cubic-bezier(.2,.8,.3,1); } .wa.show{ transform:none; opacity:1; } @media(min-width:900px){ .wa{ right:26px; bottom:26px; } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; } .rv{ opacity:1 !important; transform:none !important; } } /* ================= INNER PAGES ================= */ .nav.solid{ background:rgba(255,247,236,.95); backdrop-filter:blur(10px); box-shadow:0 4px 18px rgba(12,18,60,.08); } .nav.solid .brand{ opacity:1; visibility:visible; transform:none; pointer-events:auto; } .nav.solid .nav-in{ justify-content:space-between; } .crumb{ font-family:var(--disp); font-weight:500; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); margin:0 0 18px; } .crumb a{ text-decoration:none; color:var(--magenta); } .crumb a:hover{ text-decoration:underline; } .page-head{ padding-block:clamp(46px,6vw,86px) clamp(30px,4vw,48px); position:relative; overflow:hidden; } .page-head h1{ font-family:var(--disp); font-weight:700; text-transform:uppercase; line-height:.98; letter-spacing:-.015em; font-size:clamp(34px,6.4vw,76px); margin:0; } .page-head .sub{ font-family:var(--disp); font-weight:500; font-size:clamp(17px,2.2vw,23px); color:var(--plum); margin:16px 0 0; max-width:34ch; } .page-head p.long{ font-size:16.5px; color:var(--soft); margin:16px 0 0; max-width:58ch; } .prose{ max-width:66ch; } .prose h2{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:clamp(23px,3vw,34px); line-height:1; color:var(--plum); margin:44px 0 14px; } .prose h3{ font-family:var(--disp); font-weight:700; font-size:20px; color:var(--magenta); margin:30px 0 8px; } .prose p{ margin:0 0 16px; color:var(--soft); font-size:16.5px; } .prose strong{ color:var(--ink); } .prose ul{ margin:0 0 18px; padding:0; list-style:none; } .prose li{ display:flex; gap:10px; align-items:flex-start; margin-bottom:9px; color:var(--soft); font-size:16px; } .prose li .spark{ width:12px; height:12px; margin-top:7px; color:var(--pink); flex-shrink:0; } .pull{ font-family:var(--disp); font-weight:700; font-size:clamp(21px,2.8vw,30px); line-height:1.15; color:var(--plum); background:var(--sun); border-radius:22px; padding:26px 28px; margin:30px 0; box-shadow:0 8px 0 rgba(12,18,60,.18); } /* founders */ .people{ display:grid; gap:22px; margin-top:38px; } @media(min-width:820px){ .people{ grid-template-columns:repeat(2,1fr); } } .person{ background:#fff; border-radius:var(--r); padding:30px 26px; box-shadow:var(--sh); } .person .ch{ max-width:150px; margin:0 auto 16px; } .person h2{ font-family:var(--disp); font-weight:700; font-size:clamp(24px,2.8vw,32px); text-transform:uppercase; color:var(--plum); margin:0 0 3px; } .person .role{ font-family:var(--disp); font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--magenta); margin:0 0 16px; } .person p{ font-size:15.5px; color:var(--soft); margin:0 0 13px; } .person .li{ display:inline-flex; align-items:center; gap:7px; font-family:var(--disp); font-weight:600; font-size:14px; color:var(--plum); text-decoration:none; margin-top:6px; } .person .li:hover{ color:var(--magenta); } .person .li svg{ width:17px; height:17px; } /* word breakdown */ .word{ background:#fff; border-radius:var(--r); padding:clamp(28px,4vw,44px); box-shadow:var(--sh); text-align:center; margin-top:34px; } .word .te{ font-family:var(--disp); font-weight:700; font-size:clamp(38px,8vw,86px); line-height:1; color:var(--magenta); margin:0; } .word .say{ font-family:var(--disp); font-weight:500; font-size:clamp(15px,2vw,19px); letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin:12px 0 0; } .word .mean{ font-family:var(--disp); font-weight:700; font-size:clamp(24px,3.6vw,42px); text-transform:uppercase; color:var(--plum); margin:20px 0 0; } .parts{ display:grid; gap:14px; margin-top:32px; } @media(min-width:700px){ .parts{ grid-template-columns:repeat(3,1fr); } } .part{ background:var(--blush); border-radius:20px; padding:22px 20px; } .part strong{ display:block; font-family:var(--disp); font-weight:700; font-size:21px; color:var(--magenta); margin-bottom:5px; } .part span{ font-size:14.5px; color:var(--soft); } /* package detail */ .pk-hero{ display:grid; gap:26px; align-items:start; } @media(min-width:900px){ .pk-hero{ grid-template-columns:1.15fr .85fr; gap:40px; } } .pricebox{ background:#fff; border-radius:var(--r); padding:28px 26px; box-shadow:var(--sh); position:sticky; top:96px; } .pricebox .amt{ font-family:var(--disp); font-weight:700; font-size:clamp(38px,4.6vw,52px); line-height:1; color:var(--magenta); letter-spacing:-.02em; } .pricebox .per{ font-size:14.5px; color:var(--soft); margin:4px 0 18px; } .pricebox ul{ list-style:none; margin:0 0 20px; padding:0; } .pricebox li{ display:flex; gap:9px; align-items:flex-start; padding:7px 0; font-size:15px; color:var(--soft); border-bottom:1px solid rgba(12,18,60,.08); } .pricebox li:last-child{ border-bottom:0; } .pricebox li .spark{ width:11px; height:11px; margin-top:6px; color:var(--pink); flex-shrink:0; } .pricebox .btn{ width:100%; } .pricebox .fine{ font-size:13px; color:var(--soft); margin:14px 0 0; text-align:center; } .deliv{ display:grid; gap:14px; margin-top:26px; } @media(min-width:700px){ .deliv{ grid-template-columns:repeat(2,1fr); } } .dl{ background:#fff; border-radius:20px; padding:22px 20px; box-shadow:0 6px 0 rgba(12,18,60,.12); } .dl strong{ display:block; font-family:var(--disp); font-weight:700; font-size:18px; color:var(--plum); margin-bottom:6px; } .dl span{ font-size:14.5px; color:var(--soft); } .tl{ margin-top:26px; border-left:3px solid var(--sun); padding-left:24px; } .tl li{ list-style:none; position:relative; margin-bottom:22px; } .tl li::before{ content:""; position:absolute; left:-31px; top:5px; width:13px; height:13px; border-radius:50%; background:var(--magenta); box-shadow:0 0 0 4px var(--cream); } .tl strong{ display:block; font-family:var(--disp); font-weight:700; font-size:17px; color:var(--plum); } .tl span{ font-size:15px; color:var(--soft); } .notfor{ background:var(--blush); border-radius:22px; padding:26px 24px; margin-top:30px; } .notfor h3{ font-family:var(--disp); font-weight:700; font-size:19px; color:var(--plum); margin:0 0 10px; } .notfor li{ color:var(--soft); } /* service detail blocks */ .svc-long{ display:grid; gap:28px; align-items:center; padding-block:clamp(34px,4.5vw,54px); border-top:2px dashed rgba(12,18,60,.16); } @media(min-width:880px){ .svc-long{ grid-template-columns:.42fr 1fr; gap:40px; } } .svc-long:first-of-type{ border-top:0; } .svc-long .ch{ max-width:min(72%,240px); margin-inline:auto; } .svc-long h2{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:clamp(25px,3.4vw,38px); line-height:1; color:var(--plum); margin:0 0 6px; } .svc-long .kick{ font-family:var(--disp); font-weight:600; font-size:15px; color:var(--magenta); margin:0 0 12px; } .svc-long p{ font-size:16px; color:var(--soft); margin:0 0 14px; } .svc-long .price{ font-family:var(--disp); font-weight:700; font-size:15px; color:var(--plum); background:var(--sun); border-radius:100px; padding:7px 16px; display:inline-block; } /* card grid links */ .linkgrid{ display:grid; gap:16px; margin-top:36px; } @media(min-width:700px){ .linkgrid{ grid-template-columns:repeat(3,1fr); } } .lk{ display:block; background:#fff; border-radius:22px; padding:26px 24px; box-shadow:var(--sh); text-decoration:none; transition:transform .16s, box-shadow .16s; } .lk:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); } .lk strong{ display:block; font-family:var(--disp); font-weight:700; font-size:22px; text-transform:uppercase; color:var(--plum); margin-bottom:6px; } .lk span{ font-size:15px; color:var(--soft); } .lk .go{ display:inline-block; margin-top:14px; font-family:var(--disp); font-weight:600; font-size:14px; color:var(--magenta); } /* contact */ .cgrid{ display:grid; gap:20px; margin-top:36px; } @media(min-width:760px){ .cgrid{ grid-template-columns:repeat(2,1fr); } } .cbox{ background:#fff; border-radius:22px; padding:28px 26px; box-shadow:var(--sh); } .cbox strong{ display:block; font-family:var(--disp); font-weight:700; font-size:20px; color:var(--plum); margin-bottom:8px; } .cbox p{ font-size:15.5px; color:var(--soft); margin:0 0 14px; } .cbox a.big{ font-family:var(--disp); font-weight:700; font-size:19px; color:var(--magenta); text-decoration:none; } /* ===== FULL FOOTER ===== */ .foot-in{ display:grid; gap:34px; } @media(min-width:900px){ .foot-in{ grid-template-columns:.9fr 1.4fr; gap:44px; } } .foot-cols{ display:grid; gap:26px; } @media(min-width:520px){ .foot-cols{ grid-template-columns:repeat(2,1fr); } } @media(min-width:1040px){ .foot-cols{ grid-template-columns:repeat(4,1fr); gap:20px; } } .foot-cols h4{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); margin:0 0 12px; } .foot-cols a{ display:block; font-size:14.5px; color:#C7CBE0; text-decoration:none; padding:4px 0; transition:color .15s, transform .15s; } .foot-cols a:hover{ color:#fff; transform:translateX(3px); } .foot-brand{ display:flex; align-items:flex-start; gap:16px; } .foot-ammu{ width:74px; height:74px; flex-shrink:0; } /* ================= PLATFORM PAGE — proper layout ================= */ .plat-head{ display:grid; gap:28px; align-items:center; } @media(min-width:900px){ .plat-head{ grid-template-columns:1.12fr .88fr; gap:46px; } } .plat-head .ch{ max-width:min(76%,280px); margin-inline:auto; } .blocks{ display:grid; gap:20px; } @media(min-width:980px){ .blocks{ grid-template-columns:repeat(2,1fr); } } .blocks > .bk:first-child{ grid-column:1/-1; } .bk{ background:#fff; border-radius:var(--r); padding:30px 28px; box-shadow:var(--sh); position:relative; overflow:hidden; } .bk::before{ content:""; position:absolute; inset:0 0 auto; height:6px; background:linear-gradient(90deg,var(--yellow),var(--pink),var(--magenta)); } .bk h2{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:clamp(21px,2.5vw,28px); line-height:1.02; color:var(--plum); margin:6px 0 12px; letter-spacing:-.01em; } .bk p{ margin:0 0 14px; color:var(--soft); font-size:16px; } .bk .num{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--magenta); } .ticks{ display:grid; gap:9px; margin:18px 0 0; padding:0; list-style:none; } @media(min-width:620px){ .blocks > .bk:first-child .ticks{ grid-template-columns:repeat(2,1fr); } } .ticks li{ display:flex; gap:10px; align-items:flex-start; background:var(--blush); border-radius:14px; padding:11px 14px; font-size:14.5px; color:var(--ink); line-height:1.4; } .ticks li:nth-child(4n+2){ background:#FFF3C4; } .ticks li:nth-child(4n+3){ background:#E7EAF7; } .ticks li:nth-child(4n+4){ background:#F2ECFF; } .tick{ flex:0 0 18px; width:18px; height:18px; border-radius:50%; background:var(--magenta); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700; margin-top:1px; } .pricetag{ display:inline-flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:700; font-size:15px; color:var(--plum); background:var(--sun); border-radius:100px; padding:9px 20px; box-shadow:0 5px 0 rgba(12,18,60,.18); } .plat-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; } /* ===== OVERFLOW GUARDS (found by render test) ===== */ /* overflow-x:hidden here breaks position:sticky — clip does not */ html{ overflow-x:clip; } body{ overflow-x:clip; max-width:100%; } @supports not (overflow-x: clip){ /* older browsers: contain overflow at source instead of on the page */ html, body{ overflow-x:visible; } } .mq{ position:relative; width:100%; max-width:100vw; } .mq-in{ min-width:max-content; } section, .page-head, .hero{ overflow:hidden; } .hero, .page-head{ isolation:isolate; } /* ===== TAP TARGETS (found by render test) ===== */ .more{ display:inline-flex; align-items:center; min-height:44px; padding:4px 0; } .foot p a[href^="tel"], .foot p a[href^="mailto"]{ display:inline-block; min-height:34px; line-height:34px; } .person .li{ min-height:44px; align-items:center; } .brand{ min-height:44px; } @media(max-width:620px){ .does-pills a, .does-pills span{ padding:11px 18px; font-size:13.5px; } .bk{ padding:26px 22px; } .ticks li{ padding:12px 14px; } } .more.mt{ margin-top:12px; } .more{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:4px 0; font-family:var(--disp); font-weight:600; font-size:14.5px; color:var(--magenta); text-decoration:none; } .more:hover{ color:var(--plum); } .more::after{ content:""; } /* ===== LINK-CARD FIX (found by render test) ===== */ .lk strong{ display:block; } .lk span{ display:block; } .lk .go{ display:inline-flex; align-items:center; margin-top:14px; min-height:36px; } /* Achyuth panel — character was floating with too much space */ .person .pk-hero{ align-items:center; } @media(min-width:820px){ .person .pk-hero{ grid-template-columns:1.25fr .75fr; gap:32px; } } .person .pk-hero .ch{ max-width:min(78%,210px); } .person .li{ background:var(--blush); border-radius:100px; padding:9px 18px; } .person .li:hover{ background:var(--sun); } /* prose blocks were hugging the left on wide screens */ .wrap > .prose{ margin-inline:auto; } /* ===== FOUR-TIER PACKAGE LADDER ===== */ .packs.four{ display:grid; gap:16px; grid-template-columns:1fr; } @media(min-width:640px){ .packs.four{ grid-template-columns:repeat(2,1fr); } } @media(min-width:1120px){ .packs.four{ grid-template-columns:repeat(4,1fr); gap:14px; } } .packs.four .pk{ padding:26px 20px; } .packs.four .pk h3{ font-size:clamp(23px,2.4vw,28px); } .packs.four .pk .price{ font-size:clamp(27px,3vw,34px); } .packs.four .pk ul{ font-size:14px; } .packs.four .pk li{ padding:6px 0; } .ladder-note{ margin-top:20px; font-size:15px; color:var(--soft); text-align:center; } .ladder-note a{ color:var(--magenta); font-weight:600; text-decoration:none; } /* ===== PROSE PAGES: use the width instead of leaving it blank ===== */ .prose-wrap{ display:grid; gap:34px; align-items:start; } @media(min-width:1000px){ .prose-wrap{ grid-template-columns:minmax(0,1fr) 300px; gap:52px; } } .aside{ position:sticky; top:104px; display:grid; gap:14px; } .aside .card-mini{ background:#fff; border-radius:20px; padding:22px 20px; box-shadow:var(--sh); } .aside .card-mini h4{ font-family:var(--disp); font-weight:700; font-size:16px; color:var(--plum); margin:0 0 8px; text-transform:uppercase; letter-spacing:.02em; } .aside .card-mini p{ font-size:14px; color:var(--soft); margin:0 0 12px; } .aside .card-mini a{ display:block; font-family:var(--disp); font-weight:600; font-size:14px; color:var(--magenta); text-decoration:none; padding:6px 0; } .aside .card-mini a:hover{ color:var(--plum); } .aside .ch{ max-width:170px; margin:0 auto; } .prose{ max-width:none; } .prose p, .prose li{ max-width:70ch; } @media(max-width:999px){ .aside{ position:static; } } /* ===== PACKAGE CARD ALIGNMENT ===== */ .packs.four .pk{ display:flex; flex-direction:column; } .packs.four .pk ul{ flex:1 1 auto; } .packs.four .pk .btn{ margin-top:18px; } .pk .price{ white-space:nowrap; } .pk .price span{ white-space:nowrap; margin-left:2px; } .packs.four .pk .price{ font-size:clamp(25px,2.6vw,31px); } .packs.four .pk .for{ min-height:44px; } @media(min-width:1120px){ .packs.four .pk .for{ min-height:52px; } } /* ===== STAT BAND ===== */ .statband{ background:linear-gradient(150deg,var(--plum),var(--plum-2)); padding-block:clamp(34px,4vw,54px) !important; } .stats{ display:grid; gap:22px; } @media(min-width:760px){ .stats{ grid-template-columns:repeat(3,1fr); gap:30px; } } .st-cell{ text-align:center; padding:6px 8px; position:relative; } @media(min-width:760px){ .st-cell + .st-cell::before{ content:""; position:absolute; left:-15px; top:8px; bottom:8px; width:2px; background:rgba(255,255,255,.16); } } .st-cell strong{ display:block; font-family:var(--disp); font-weight:700; font-size:clamp(30px,4.4vw,50px); line-height:1; letter-spacing:-.02em; color:var(--yellow); margin-bottom:8px; } .st-cell span{ display:block; font-size:15px; color:#C7CBE0; max-width:26ch; margin-inline:auto; } /* ===== TIMELINE — was misaligning label and text ===== */ .tl{ margin:26px 0 0; padding:0 0 0 26px; border-left:3px solid var(--sun); list-style:none; } .tl li{ position:relative; margin:0 0 22px; padding:0; display:block; } .tl li:last-child{ margin-bottom:0; } .tl li::before{ content:""; position:absolute; left:-33px; top:6px; width:13px; height:13px; border-radius:50%; background:var(--magenta); box-shadow:0 0 0 4px var(--cream); } .tl strong{ display:block; font-family:var(--disp); font-weight:700; font-size:16.5px; color:var(--plum); margin-bottom:4px; line-height:1.25; } .tl span{ display:block; font-size:15px; color:var(--soft); max-width:56ch; } .b-blush .tl li::before{ box-shadow:0 0 0 4px var(--blush); } /* ===== PACKAGE BODY — two columns instead of one narrow one ===== */ .pk-body{ display:grid; gap:34px; align-items:start; } @media(min-width:960px){ .pk-body{ grid-template-columns:1.05fr .95fr; gap:48px; } } .pk-body h2{ margin-top:0 !important; } .pk-panel{ background:#fff; border-radius:var(--r); padding:28px 26px; box-shadow:var(--sh); } .pk-panel h2{ font-size:clamp(21px,2.4vw,28px) !important; } .notfor{ margin-top:24px; } /* FAQ was hugging the left on wide screens */ .faq{ max-width:none; } @media(min-width:1000px){ .faq{ columns:2; column-gap:16px; } .faq details{ break-inside:avoid; margin-bottom:12px; } } /* dots centred on the timeline rule */ .tl{ padding-left:24px; } .tl li::before{ left:-32px; } .pk-panel .tl{ margin-left:2px; } .pk-panel .tl li::before{ left:-31px; box-shadow:0 0 0 4px #fff; } .tl span{ max-width:none; } /* ================= NAV LOGO SCROLL ENTRANCE (rebuilt) ================= */ .nav{ transition:background .32s ease, box-shadow .32s ease, padding .28s ease; } .nav-in{ transition:padding .28s ease; } .nav.tight .nav-in{ padding-block:7px; } .brand{ opacity:0; visibility:hidden; transform:translateY(-16px) scale(.86); transform-origin:left center; pointer-events:none; transition:opacity .34s ease, transform .46s cubic-bezier(.2,1.5,.4,1), visibility .46s; } .nav.tight .brand, .nav.solid .brand{ opacity:1; visibility:visible; transform:none; pointer-events:auto; } /* logo drops in and settles */ .nav-logo{ height:30px; width:auto; transition:height .3s ease, transform .5s cubic-bezier(.2,1.6,.4,1); transform:translateY(-6px); } .nav.tight .nav-logo, .nav.solid .nav-logo{ transform:none; } @media(max-width:759px){ .nav-logo{ height:24px; } } /* Ammu pops in just behind the logo */ .ammu-badge{ transform:scale(.4) rotate(-18deg); transition:transform .5s cubic-bezier(.2,1.7,.4,1) .06s; } .nav.tight .ammu-badge, .nav.solid .ammu-badge{ transform:none; } .brand:hover .ammu-badge{ animation:ammuWave .6s ease; } @keyframes ammuWave{ 0%,100%{ transform:rotate(0); } 30%{ transform:rotate(-12deg); } 65%{ transform:rotate(10deg); } } /* the gradient rail thickens once the bar is active */ .rail{ transition:height .3s ease; } .nav.tight .rail{ height:4px; } @media (prefers-reduced-motion:reduce){ .brand,.nav-logo,.ammu-badge{ transition:none !important; transform:none !important; } } /* ================================================================== SERVICE CARDS — Option A Plum header, service name white, eight identical tiles ================================================================== */ .svcs{ display:grid; gap:18px; margin-top:44px; grid-template-columns:1fr; } @media(min-width:600px){ .svcs{ grid-template-columns:repeat(2,1fr); } } @media(min-width:1080px){ .svcs{ grid-template-columns:repeat(4,1fr); } } a.svc{ display:flex; flex-direction:column; background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 9px 0 rgba(12,18,60,.14); text-decoration:none; color:inherit; transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease; } a.svc:hover{ transform:translateY(-7px); box-shadow:0 16px 0 rgba(12,18,60,.16); } a.svc:focus-visible{ outline:3px solid var(--magenta); outline-offset:4px; } /* the header bar — this is the whole point of the design */ .svc-top{ display:flex; align-items:center; gap:12px; background:var(--plum); padding:16px 18px; min-height:74px; } a.svc:nth-child(4n+2) .svc-top{ background:var(--magenta); } a.svc:nth-child(4n+3) .svc-top{ background:#3D2A7A; } a.svc:nth-child(4n+4) .svc-top{ background:#DE5500; } .svc-ico{ flex:0 0 40px; width:40px; height:40px; border-radius:12px; background:var(--sun); color:var(--plum); display:grid; place-items:center; } .svc-ico svg{ width:23px; height:23px; } .svc-name{ font-family:var(--disp); font-weight:700; font-size:17px; line-height:1.08; color:#fff; text-transform:uppercase; letter-spacing:-.005em; } .svc-body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; } .svc .film{ margin:0 0 6px; font-family:var(--disp); font-weight:700; font-size:16px; line-height:1.1; color:var(--magenta); } .svc .kick{ margin:0 0 10px; font-family:var(--disp); font-weight:500; font-size:13.5px; line-height:1.3; color:var(--slate); } .svc .body{ margin:0 0 14px; font-size:14.5px; line-height:1.5; color:var(--soft); } .svc .chips{ margin:auto 0 0; padding-top:13px; font-size:12.5px; color:var(--slate); border-top:1px solid rgba(12,18,60,.14); } .svc .more{ margin-top:13px; padding:0; min-height:auto; font-family:var(--disp); font-weight:700; font-size:14px; color:var(--plum); display:inline-flex; align-items:center; gap:8px; } .svc .arw{ font-style:normal; display:inline-block; transition:transform .18s ease; } a.svc:hover .arw{ transform:translateX(5px); } a.svc:hover .more{ color:var(--magenta); } /* ===== NEW LOGO SIZING ===== The lockup is mascot-over-wordmark (2.3:1), so it needs more height than a flat wordmark or the name becomes unreadable. */ .nav-logo{ height:60px !important; width:auto; } .nav.tight .nav-logo{ height:50px !important; } @media(max-width:759px){ .nav-logo{ height:46px !important; } .nav.tight .nav-logo{ height:40px !important; } } .nav-in{ padding-block:8px; } .nav.tight .nav-in{ padding-block:5px; } .ammu-badge{ display:none !important; } .foot-ammu{ display:none !important; } .foot-brand{ display:block; } .foot img{ height:86px; width:auto; margin-bottom:14px; } @media(max-width:600px){ .foot img{ height:66px; } } .brand{ gap:0; } /* mobile nav: the logo was crowding the controls */ @media(max-width:620px){ .nav-logo{ height:38px !important; } .nav.tight .nav-logo{ height:34px !important; } .lang button{ padding:6px 8px; font-size:11px; } .nav-right .btn-sm{ padding:9px 13px; font-size:13px; } .nav-in{ gap:8px; } } @media(max-width:420px){ .nav-right .btn-sm{ display:none; } .nav-logo{ height:40px !important; } } /* ================================================================== AMMU — the mascot, one image, animated per context ================================================================== */ .ammu{ position:relative; display:block; width:100%; line-height:0; filter:drop-shadow(0 14px 10px rgba(12,18,60,.16)); } .ammu img.ch{ display:block; width:100%; height:auto; max-width:100%; transform-origin:60% 90%; } /* a soft coloured disc behind him so he sits on something */ .ammu::before{ content:""; position:absolute; left:50%; top:58%; width:96%; aspect-ratio:1; transform:translate(-50%,-50%); background:radial-gradient(circle, var(--gold-lo) 0%, var(--gold-lo) 46%, transparent 70%); border-radius:50%; z-index:-1; animation:ammuGlow 6s ease-in-out infinite; } .b-plum .ammu::before, .band-granite .ammu::before{ background:radial-gradient(circle, rgba(139,77,224,.34) 0%, rgba(139,77,224,.20) 46%, transparent 70%); } .b-sun .ammu::before{ background:radial-gradient(circle, rgba(255,255,255,.62) 0%, rgba(255,255,255,.35) 46%, transparent 70%); } @keyframes ammuGlow{ 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.9; } 50% { transform:translate(-50%,-50%) scale(1.07); opacity:1; } } /* ---------- idle motion, varied by pose so he never looks static ---------- */ .ammu[data-pose="hero"] img{ animation:ammuFloat 5.5s ease-in-out infinite; } .ammu[data-pose="director"] img{ animation:ammuFloat 6.2s ease-in-out infinite; } .ammu[data-pose="reel"] img{ animation:ammuBob 4.6s ease-in-out infinite; } .ammu[data-pose="mega"] img{ animation:ammuLean 5s ease-in-out infinite; } .ammu[data-pose="creator"] img{ animation:ammuBob 5.2s ease-in-out infinite; } .ammu[data-pose="designer"] img{ animation:ammuLean 6s ease-in-out infinite; } .ammu[data-pose="painter"] img{ animation:ammuFloat 6.6s ease-in-out infinite; } .ammu[data-pose="builder"] img{ animation:ammuBob 5.8s ease-in-out infinite; } .ammu[data-pose="makeover"] img{ animation:ammuLean 5.4s ease-in-out infinite; } .ammu[data-pose="ribbon"] img{ animation:ammuPop 4.8s ease-in-out infinite; } .ammu[data-pose="chai"] img{ animation:ammuFloat 7s ease-in-out infinite; } .ammu[data-pose="wave"] img{ animation:ammuWave2 4.2s ease-in-out infinite; } @keyframes ammuFloat{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-14px) rotate(-1.4deg); } } @keyframes ammuBob{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-9px) scale(1.02); } } @keyframes ammuLean{ 0%,100%{ transform:rotate(-2.2deg) translateY(0); } 50%{ transform:rotate(2.2deg) translateY(-7px); } } @keyframes ammuPop{ 0%,88%,100%{ transform:translateY(0) scale(1); } 93%{ transform:translateY(-16px) scale(1.05); } } @keyframes ammuWave2{ 0%,70%,100%{ transform:rotate(0); } 78%{ transform:rotate(-7deg); } 86%{ transform:rotate(6deg); } } /* ---------- sparkles that pop around him ---------- */ .ammu::after{ content:"✦"; position:absolute; top:6%; right:8%; font-size:clamp(15px,2.2vw,26px); color:var(--gold); animation:ammuSpark 3.4s ease-in-out infinite; pointer-events:none; } .ammu[data-pose="mega"]::after, .ammu[data-pose="ribbon"]::after{ color:var(--purple-hi); } @keyframes ammuSpark{ 0%,100%{ transform:scale(.5) rotate(0); opacity:0; } 35% { transform:scale(1.15) rotate(70deg); opacity:1; } 70% { transform:scale(.7) rotate(150deg); opacity:.25; } } /* ---------- he reacts when you hover the card ---------- */ a.svc:hover .ammu img, .bk:hover .ammu img, .lk:hover .ammu img{ animation:ammuCheer .7s cubic-bezier(.2,1.5,.4,1) both; } @keyframes ammuCheer{ 0% { transform:translateY(0) rotate(0) scale(1); } 35% { transform:translateY(-18px) rotate(-6deg) scale(1.07); } 70% { transform:translateY(-4px) rotate(4deg) scale(1.02); } 100%{ transform:translateY(0) rotate(0) scale(1); } } /* ---------- sizing per placement ---------- */ .hero-art .ammu{ max-width:min(94%,420px); margin-inline:auto; } .ch-wrap .ammu{ max-width:150px; margin-inline:auto; } .svc-long .ammu{ max-width:min(78%,250px); margin-inline:auto; } .plat-head .ammu{ max-width:min(80%,300px); margin-inline:auto; } .person .ammu{ max-width:170px; margin:0 auto 16px; } .card-mini .ammu{ max-width:150px; margin-inline:auto; } .promise-grid .ammu{ max-width:min(84%,340px); margin-inline:auto; } .city-grid2 .ammu{ max-width:min(80%,300px); margin-inline:auto; } .b-sun .ammu{ max-width:200px; margin-inline:auto; } @media (prefers-reduced-motion:reduce){ .ammu img, .ammu::before, .ammu::after{ animation:none !important; } .ammu::after{ opacity:.9; transform:none; } } /* pose-specific motion for the real artwork */ .ammu[data-pose="social"] img{ animation:ammuFloat 5.4s ease-in-out infinite; } .ammu[data-pose="design"] img{ animation:ammuLean 6.2s ease-in-out infinite; } .ammu[data-pose="ads"] img{ animation:ammuShout 4.4s ease-in-out infinite; } .ammu[data-pose="creator"] img{ animation:ammuBob 4.8s ease-in-out infinite; } .ammu[data-pose="outdoor"] img{ animation:ammuStride 5.6s ease-in-out infinite; } .ammu[data-pose="google"] img{ animation:ammuLean 5.8s ease-in-out infinite; } .ammu[data-pose="launch"] img{ animation:ammuSnip 4.2s ease-in-out infinite; } @keyframes ammuShout{ 0%,100%{ transform:rotate(-1.6deg) translateY(0) scale(1); } 50%{ transform:rotate(1.8deg) translateY(-8px) scale(1.02); } } @keyframes ammuStride{ 0%,100%{ transform:translateX(0) translateY(0) rotate(0); } 50%{ transform:translateX(6px) translateY(-9px) rotate(1.2deg); } } @keyframes ammuSnip{ 0%,72%,100%{ transform:translateY(0) rotate(0); } 80%{ transform:translateY(-12px) rotate(-3deg); } 90%{ transform:translateY(-3px) rotate(2deg); } } /* V14 mascot-first refinement */ :root{--v14-purple:#6f2cff;--v14-yellow:#ffd21c;--v14-ink:#17131f;--v14-soft:#faf8ff;} img[src*="mascots-v14"]{filter:drop-shadow(0 18px 34px rgba(34,20,63,.14));} .hero img[src*="mascots-v14"], .hero-visual img[src*="mascots-v14"]{max-height:650px;object-fit:contain;} .service-card img[src*="mascots-v14"], .service-visual img[src*="mascots-v14"]{max-height:300px;object-fit:contain;} @media(max-width:768px){.hero img[src*="mascots-v14"],.hero-visual img[src*="mascots-v14"]{max-height:430px}.service-card img[src*="mascots-v14"],.service-visual img[src*="mascots-v14"]{max-height:240px}} /* V15 FINAL REFINEMENT */ .hero{padding-block:clamp(58px,7vw,96px) clamp(46px,6vw,78px);background:linear-gradient(180deg,#fff 0%,#fbf8ff 100%)} .hero-grid{min-height:560px}.hero h1{max-width:8ch}.hero-sub{font-size:clamp(20px,2.3vw,28px);max-width:26ch;margin-top:18px}.hero-plain{max-width:49ch;line-height:1.72;margin-top:15px}.hero-art .ammu{max-width:min(92%,500px)}.hero-art .ch{max-width:100%;max-height:610px;object-fit:contain;animation:ammuFloat 7s ease-in-out infinite!important}.hero-cta{align-items:center;margin-top:28px}.hero-text-link{font-weight:750;color:var(--plum);text-decoration:none;padding:12px 4px;border-bottom:2px solid rgba(67,16,127,.18)}.hero-text-link:hover{border-color:var(--plum)}.hero-proofline{margin-top:20px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(67,16,127,.58)}.hero .blob,.hero .confetti{display:none!important} .platform-rail{padding:18px 0;border-top:1px solid rgba(67,16,127,.09);border-bottom:1px solid rgba(67,16,127,.09);background:#fff}.platform-rail .wrap{display:flex;gap:20px;align-items:center}.platform-label{flex:0 0 auto;margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:rgba(67,16,127,.58)}.platform-list{display:flex;gap:8px;flex-wrap:wrap}.platform-list a{padding:7px 11px;border:1px solid rgba(67,16,127,.12);border-radius:999px;text-decoration:none;color:var(--plum);font-size:13px;font-weight:650;background:#fff}.platform-list a:hover{background:#f7f1ff;border-color:rgba(67,16,127,.25)} .svc{overflow:hidden;position:relative;min-height:395px}.svc-mini{display:block;width:auto;height:118px;object-fit:contain;object-position:left bottom;margin:2px 0 10px;filter:none!important;transform:translateX(-5px);transition:transform .28s ease}.svc:hover .svc-mini{transform:translateX(0) translateY(-3px)}.svc .body{font-size:14.5px;line-height:1.62}.svc .film{margin-top:2px}.promise-grid .ch,.city-grid2 .ch{max-height:430px;object-fit:contain}.promise-grid .ch,.city-grid2 .ch,.svc-mini,.page-head .ch{animation:none!important}.page-head .blob{opacity:.13!important;filter:blur(78px)!important}.page-head{padding-block:clamp(48px,6vw,76px)}.plat-head .ch{max-height:390px!important;width:auto;margin-inline:auto} .proof-section{background:#fff;padding-block:clamp(64px,7vw,94px)}.proof-section .lede{max-width:56ch}.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}.proof-card{border-top:3px solid var(--yellow);background:#faf8ff;padding:23px 21px;border-radius:16px;min-height:145px}.proof-card strong{display:block;font-family:var(--disp);font-size:20px;color:var(--plum);margin-bottom:8px}.proof-card span{font-size:14px;line-height:1.55;color:var(--soft)} .packs.four{align-items:stretch}.pk.secondary-plan{transform:scale(.97);opacity:.88;background:#fff}.pk.recommended{transform:scale(1.035);box-shadow:0 22px 55px rgba(67,16,127,.15);border-width:2px;position:relative;z-index:2}.pk.recommended .rib{background:var(--yellow);color:var(--plum);display:inline-flex;padding:6px 10px;border-radius:999px}.pk.recommended .btn{width:100%;text-align:center}img[src*="mascots-v15"]{filter:drop-shadow(0 15px 28px rgba(34,20,63,.11))}.svc-mini[src*="mascots-v15"]{filter:none} @media(max-width:980px){.proof-grid{grid-template-columns:repeat(2,1fr)}.pk.secondary-plan,.pk.recommended{transform:none}}@media(max-width:720px){.hero{padding-top:44px}.hero-grid{min-height:0;gap:14px}.hero h1{max-width:none}.hero-art{order:-1}.hero-art .ammu{max-width:290px}.hero-art .ch{max-height:340px}.platform-rail .wrap{display:block}.platform-label{margin-bottom:10px}.platform-list{gap:6px}.platform-list a{font-size:12px;padding:6px 9px}.proof-grid{grid-template-columns:1fr}.proof-card{min-height:0}.svc{min-height:0}.svc-mini{height:96px}.plat-head .ch{max-height:300px!important}}@media(prefers-reduced-motion:reduce){.hero-art .ch{animation:none!important}} /* ===== V16 JOYFUL / LANGUAGE-FIRST EXPERIENCE ===== */ .am-loader{position:fixed;inset:0;z-index:9999;background:#111226;color:#fff;display:grid;place-items:center;padding:28px;transition:opacity .55s ease,visibility .55s ease} .am-loader.hide{opacity:0;visibility:hidden;pointer-events:none} .am-loader-inner{width:min(880px,92vw);text-align:left} .am-loader-logo{width:min(260px,56vw);height:auto;margin-bottom:clamp(26px,6vw,58px)} .am-loader-kicker{font:700 11px/1 var(--body);letter-spacing:.18em;color:var(--yellow);margin:0 0 16px} .am-loader-fact{font:700 clamp(28px,5vw,64px)/1.02 var(--disp);letter-spacing:-.035em;max-width:17ch;margin:0;min-height:2.1em;transition:opacity .12s} .am-loader-track{height:5px;background:rgba(255,255,255,.16);margin-top:34px;border-radius:20px;overflow:hidden} .am-loader-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--yellow),#ff7a00,#ff4b91);border-radius:20px} .am-loader-foot{font-size:12px;opacity:.55;margin-top:13px} .gate-v16{background:#fff9e9;overflow:auto;padding:clamp(18px,3vw,38px)} .gate-v16:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 12%,rgba(255,213,31,.55),transparent 24%),radial-gradient(circle at 88% 18%,rgba(124,50,232,.18),transparent 28%),radial-gradient(circle at 55% 100%,rgba(255,94,145,.15),transparent 30%)} .gate-stage{position:relative;z-index:1;width:min(1180px,100%);margin:auto} .gate-brand{text-align:left;display:grid;grid-template-columns:auto 1fr;column-gap:34px;align-items:end;margin-bottom:28px} .gate-brand img{grid-row:1/5;width:min(270px,28vw);height:auto;margin:0} .gate-eyebrow{font-weight:800;letter-spacing:.13em;font-size:11px;color:var(--magenta);margin:0 0 9px} .gate-brand h1{font-size:clamp(34px,5.3vw,72px);line-height:.94;letter-spacing:-.035em;text-transform:none;margin:0;color:var(--plum)} .gate-lede{max-width:58ch;margin:13px 0 0;color:var(--soft)} .picks-v16{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px} .picks-v16 .pick{position:relative;text-align:left;border:2px solid #111226;border-radius:26px;padding:24px;min-height:260px;box-shadow:7px 7px 0 #111226;display:flex;flex-direction:column;align-items:flex-start;background:#fff;overflow:hidden} .picks-v16 .pick:hover{transform:translate(-3px,-4px);box-shadow:11px 12px 0 #111226} .pick-telugu:hover{background:#ffe256!important}.pick-hindi:hover{background:#e8d7ff!important}.pick-english:hover{background:#ffdae7!important} .pick-num{font-weight:800;font-size:12px;opacity:.45}.pick-script{font-family:var(--disp);font-size:clamp(38px,4.8vw,64px);font-weight:700;line-height:1;margin-top:26px;color:var(--plum)} .picks-v16 .n{font-size:17px!important;letter-spacing:.08em;margin-top:6px}.pick-line{margin-top:20px;font-size:14px;max-width:18ch;color:var(--soft)} .pick-arrow{margin-top:auto;font-family:var(--disp);font-weight:700;color:var(--plum);font-size:17px}.gate-note{text-align:center;margin-top:24px} .hero-v16{position:relative;background:#fff9e9;padding-top:clamp(54px,7vw,100px);padding-bottom:0!important;border-bottom:2px solid #111226} .hero-v16:after{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(90deg,var(--yellow) 0 34%,var(--magenta) 34% 66%,var(--purple) 66%)} .hero-noise{position:absolute;inset:0;opacity:.17;pointer-events:none;background-image:radial-gradient(#111226 .7px,transparent .8px);background-size:17px 17px;mask-image:linear-gradient(to bottom,#000,transparent 75%)} .hero-grid-v16{position:relative;z-index:1;min-height:640px;align-items:center}.hero-copy-v16{padding-bottom:64px} .hero-kicker-v16{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-weight:800;font-size:10px;letter-spacing:.12em;margin:0 0 20px;color:var(--plum)} .hero-kicker-v16 span,.hero-kicker-v16 b{border:1.5px solid currentColor;border-radius:100px;padding:7px 10px;background:#fff}.hero-kicker-v16 i{font-style:normal;color:var(--magenta)} .hero-v16 h1{font-size:clamp(62px,10vw,142px)!important;line-height:.79!important;letter-spacing:-.065em!important;max-width:6.4ch!important;text-wrap:balance} .hero-v16 .grad{background:linear-gradient(135deg,#3f0c75 15%,#8d28d5 55%,#ff4c86 100%);-webkit-background-clip:text;color:transparent} .hero-v16 .hero-sub{font-size:clamp(21px,2.4vw,31px);line-height:1.08;max-width:26ch;margin-top:26px;color:#111226} .hero-v16 .hero-plain{font-size:15px;line-height:1.65;max-width:55ch}.btn-pop{box-shadow:6px 6px 0 #111226!important;border:2px solid #111226!important} .btn-pop:hover{transform:translate(-2px,-3px)!important;box-shadow:9px 10px 0 #111226!important} .hero-stamp-v16{display:inline-flex;align-items:center;gap:10px;margin-top:28px;transform:rotate(-2deg);background:var(--yellow);border:2px solid #111226;padding:8px 12px;box-shadow:4px 4px 0 #111226;font-size:12px} .hero-stamp-v16 strong{font-family:var(--disp);letter-spacing:.05em}.hero-art-v16{min-height:570px;display:grid;place-items:center;position:relative} .hero-art-v16 .ammu{position:relative;z-index:2;max-width:min(95%,550px)!important}.hero-art-v16 .ch{max-height:650px!important;filter:drop-shadow(18px 24px 0 rgba(91,27,182,.10))} .hero-orbit{position:absolute;inset:6% 2% 5%;z-index:1;border:2px dashed rgba(91,27,182,.22);border-radius:50%;animation:orbitSpin 22s linear infinite} .orbit-pill{position:absolute;font:800 10px/1 var(--body);letter-spacing:.1em;border:2px solid #111226;border-radius:100px;padding:9px 12px;background:#fff;box-shadow:4px 4px 0 #111226} .orbit-pill.p1{top:6%;left:10%;background:var(--yellow)}.orbit-pill.p2{top:26%;right:-4%;background:#e7d5ff}.orbit-pill.p3{bottom:18%;left:-2%;background:#ffd9e5}.orbit-pill.p4{bottom:3%;right:12%;background:#fff} .hero-bubble-v16{position:absolute;z-index:3;right:-2%;bottom:18%;background:#fff;border:2px solid #111226;padding:12px 15px;border-radius:18px 18px 4px 18px;box-shadow:5px 5px 0 #111226;font-size:12px;transform:rotate(2deg)} .hero-marquee-v16{position:relative;z-index:3;background:#111226;color:#fff;border-top:2px solid #111226;overflow:hidden;white-space:nowrap;padding:13px 0;font:700 12px/1 var(--disp);letter-spacing:.12em} .hero-marquee-v16 div{width:max-content;animation:marqueeV16 19s linear infinite} .lang-float-v16{display:flex;gap:4px;margin-right:8px}.lang-float-v16 button{border:1px solid rgba(67,16,127,.18);background:#fff;color:var(--plum);border-radius:100px;padding:6px 7px;font:700 10px var(--body);cursor:pointer} .lang-float-v16 button[aria-pressed="true"]{background:var(--yellow);border-color:var(--plum)} body.mode-telugu .platform-label:after{content:" · మన business, mass visibility";color:var(--magenta)} body.mode-hindi .platform-label:after{content:" · har jagah dikhna hai";color:var(--magenta)} body.mode-english .platform-label:after{content:" · one brand, every touchpoint";color:var(--magenta)} @keyframes marqueeV16{to{transform:translateX(-50%)}}@keyframes orbitSpin{to{transform:rotate(360deg)}} @media(max-width:780px){.gate-brand{display:block;text-align:center}.gate-brand img{width:220px;margin:0 auto 20px}.gate-lede{margin-inline:auto}.picks-v16{grid-template-columns:1fr}.picks-v16 .pick{min-height:180px}.pick-script{margin-top:14px}.gate-stage{padding-block:16px}} @media(max-width:939px){.hero-grid-v16{min-height:0}.hero-copy-v16{padding-bottom:24px}.hero-art-v16{min-height:430px}.hero-v16 h1{font-size:clamp(60px,16vw,108px)!important;max-width:7ch!important}.hero-bubble-v16{right:6%;bottom:11%}.hero-art-v16 .ch{max-height:500px!important}} @media(max-width:640px){.am-loader-inner{text-align:center}.am-loader-fact{margin-inline:auto}.am-loader-logo{margin-inline:auto}.hero-v16{padding-top:32px}.hero-grid-v16{display:flex!important;flex-direction:column}.hero-copy-v16{order:1}.hero-art-v16{order:2;min-height:390px;width:100%}.hero-v16 h1{font-size:clamp(58px,18vw,90px)!important}.hero-v16 .hero-sub{font-size:22px}.hero-orbit{inset:8% 2% 10%}.hero-art-v16 .ammu{max-width:330px!important}.hero-art-v16 .ch{max-height:390px!important}.hero-bubble-v16{font-size:10px;right:2%;bottom:12%}.orbit-pill{font-size:8px;padding:7px 9px}} @media(prefers-reduced-motion:reduce){.hero-orbit,.hero-marquee-v16 div{animation:none!important}} /* ============================================================ V17 — CINEMATIC MASS HERO / FINAL CREATIVE PASS ============================================================ */ .gate-v16 .pick-script{font-size:clamp(34px,4vw,58px);letter-spacing:-.035em}.gate-v16 .n{font-size:12px!important;text-transform:uppercase;letter-spacing:.13em;opacity:.62} .hero-v17{position:relative;isolation:isolate;min-height:calc(100svh - 76px);display:flex;flex-direction:column;justify-content:center;background:#160617;color:#fff;padding:0!important;overflow:hidden;border-bottom:0} .cinema-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(circle at 72% 44%,rgba(255,187,16,.28),transparent 22%),radial-gradient(circle at 19% 27%,rgba(255,59,79,.30),transparent 31%),radial-gradient(circle at 72% 78%,rgba(113,22,187,.54),transparent 37%),linear-gradient(127deg,#170516 0%,#3a0d26 31%,#52130f 58%,#2c092d 100%)} .cinema-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,2,13,.74) 0%,rgba(12,2,13,.22) 48%,rgba(12,2,13,.06) 70%),radial-gradient(ellipse at center,transparent 35%,rgba(8,0,9,.60) 100%)} .cinema-grain{position:absolute;inset:-40%;width:180%;height:180%;opacity:.10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");animation:grainShake .22s steps(2) infinite;mix-blend-mode:soft-light} .cinema-logo{position:absolute;right:-7vw;top:50%;width:min(67vw,980px);height:auto;transform:translateY(-50%) rotate(-5deg);filter:saturate(1.25)} .cinema-logo-back{opacity:.16;transform:translateY(-50%) rotate(-7deg) scale(1.15);filter:blur(18px) saturate(1.8) drop-shadow(0 0 50px rgba(255,181,0,.5));animation:logoPulse 5.5s ease-in-out infinite} .cinema-logo-front{opacity:.09;mix-blend-mode:screen;filter:grayscale(1) brightness(2.2) sepia(1) hue-rotate(340deg) saturate(4);animation:logoDrift 8s ease-in-out infinite} .cinema-beam{position:absolute;width:70vw;height:18vw;filter:blur(18px);opacity:.16;background:linear-gradient(90deg,transparent,#ffcf32,transparent);transform:rotate(-24deg);animation:beamSweep 8s ease-in-out infinite} .beam-a{left:-15%;top:15%}.beam-b{right:-20%;bottom:8%;animation-delay:-4s;transform:rotate(18deg);background:linear-gradient(90deg,transparent,#ff395d,transparent)} .ember-field{position:absolute;inset:0;overflow:hidden}.ember-field i{position:absolute;left:var(--x);bottom:-20px;width:var(--size);height:var(--size);border-radius:50%;background:#ffd44a;box-shadow:0 0 10px #ff6a00,0 0 18px rgba(255,106,0,.72);animation:emberRise var(--d) linear var(--delay) infinite} .hero-grid-v17{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);align-items:center;gap:20px;min-height:calc(100svh - 126px);padding-top:clamp(45px,6vw,80px);padding-bottom:66px} .hero-copy-v17{position:relative;z-index:4}.hero-kicker-v17{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font:800 10px/1 var(--body);letter-spacing:.13em;margin:0 0 20px;color:#fff}.hero-kicker-v17 span,.hero-kicker-v17 b{border:1px solid rgba(255,255,255,.32);border-radius:99px;padding:8px 11px;background:rgba(17,4,18,.30);backdrop-filter:blur(8px)}.hero-kicker-v17 b{background:var(--yellow);color:#25081e;border-color:var(--yellow)}.hero-kicker-v17 i{font-style:normal;color:#ffc529}.hero-pretitle{margin:0 0 10px;font-family:var(--disp);font-weight:600;font-size:clamp(14px,1.4vw,18px);color:#ffc842}.hero-v17 h1{font-size:clamp(68px,9.2vw,138px)!important;line-height:.78!important;letter-spacing:-.07em!important;max-width:6.3ch!important;margin:0}.cinema-title{display:inline-block;color:#fff3d1;text-shadow:0 3px 0 #c23122,0 7px 0 rgba(55,4,12,.62),0 0 30px rgba(255,101,37,.36);transform:rotate(-1.5deg);animation:titleReveal 1.25s cubic-bezier(.16,.8,.2,1) both}.hero-v17 .hero-sub{font-size:clamp(22px,2.5vw,32px);line-height:1.05;max-width:25ch;margin:28px 0 15px;color:#fff;font-weight:650}.hero-v17 .hero-plain{font-size:14.5px;line-height:1.62;max-width:55ch;color:rgba(255,255,255,.72)} .btn-cinema{background:var(--yellow)!important;color:#2b0b1f!important;border:2px solid #fce699!important;box-shadow:0 0 0 4px rgba(255,209,35,.10),8px 8px 0 #6e161f!important}.btn-cinema:hover{transform:translate(-3px,-3px)!important;box-shadow:0 0 30px rgba(255,204,34,.28),11px 11px 0 #6e161f!important}.hero-text-link-v17{color:#fff!important;border-bottom-color:rgba(255,255,255,.55)!important}.hero-channel-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:28px}.hero-channel-row span{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:7px 9px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);border-radius:4px;color:rgba(255,255,255,.72);backdrop-filter:blur(6px)} .hero-art-v17{min-height:620px;position:relative;display:grid;place-items:center}.hero-ammu-v17{position:relative;z-index:4;max-width:min(92%,545px)!important;animation:ammuEntrance 1.05s .16s cubic-bezier(.17,.89,.27,1.2) both}.hero-ammu-v17 .ch{max-height:650px!important;filter:drop-shadow(0 32px 25px rgba(0,0,0,.40)) drop-shadow(0 0 42px rgba(255,139,24,.20))}.hero-wordmark{position:absolute;z-index:1;top:51%;left:49%;transform:translate(-50%,-50%) rotate(-6deg);font:800 clamp(74px,10vw,154px)/.75 var(--disp);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(255,222,150,.15);white-space:nowrap;animation:wordmarkFloat 7s ease-in-out infinite}.mass-ring{position:absolute;border:1px solid rgba(255,203,73,.27);border-radius:50%;z-index:1}.ring-one{width:470px;height:470px;animation:ringPulse 5s ease-in-out infinite}.ring-two{width:610px;height:610px;border-style:dashed;opacity:.45;animation:ringSpin 32s linear infinite}.hero-mass-card{position:absolute;z-index:6;min-width:145px;padding:11px 13px;background:rgba(23,5,18,.74);border:1px solid rgba(255,221,127,.36);backdrop-filter:blur(9px);box-shadow:0 12px 34px rgba(0,0,0,.25);transform:rotate(var(--r,0deg));animation:cardFloat 5s ease-in-out infinite}.hero-mass-card small{display:block;color:#ffc942;font-size:9px;letter-spacing:.16em}.hero-mass-card strong{display:block;font-family:var(--disp);font-size:17px;letter-spacing:.03em;color:#fff}.hero-mass-card span{display:block;font-size:9px;color:rgba(255,255,255,.60);margin-top:2px}.card-a{left:0;top:23%;--r:-4deg}.card-b{right:-3%;top:35%;--r:4deg;animation-delay:-1.6s}.card-c{right:3%;bottom:13%;--r:-2deg;animation-delay:-3.2s}.hero-marquee-v17{position:absolute;left:0;right:0;bottom:0;z-index:8;background:#f7bc22;color:#31100d;border-top:1px solid rgba(255,255,255,.12);overflow:hidden;white-space:nowrap;padding:14px 0;font:800 11px/1 var(--disp);letter-spacing:.12em}.hero-marquee-v17 div{width:max-content;animation:marqueeV17 22s linear infinite} .svc-price-v17{display:inline-flex;margin:10px 0 0;padding:6px 9px;background:#fff1a8;border:1px solid rgba(67,16,127,.14);border-radius:8px;font-size:11px;font-weight:800;color:var(--plum)} .influencer-clarity-v17{padding-top:34px!important;padding-bottom:34px!important}.influencer-price-card-v17{display:grid;grid-template-columns:1.05fr 1.15fr .9fr;border:2px solid var(--plum);border-radius:26px;overflow:hidden;background:#fff;box-shadow:9px 9px 0 rgba(67,16,127,.12)}.influencer-price-card-v17>div{padding:28px}.inf-price-main{background:var(--plum);color:#fff}.inf-price-main>span,.inf-includes>p,.inf-mix>p{display:block;font-size:10px;letter-spacing:.14em;font-weight:800;text-transform:uppercase;opacity:.66;margin-bottom:12px}.inf-price-main strong{display:block;font-family:var(--disp);font-size:clamp(40px,4.6vw,62px);line-height:.9;color:var(--yellow);letter-spacing:-.04em}.inf-price-main strong small{font-size:14px;letter-spacing:0;color:#fff}.inf-price-main p{max-width:25ch;color:rgba(255,255,255,.72);margin-top:18px}.inf-includes{border-right:1px solid rgba(67,16,127,.12)}.inf-includes ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}.inf-includes li{position:relative;padding-left:19px;font-size:13px}.inf-includes li:before{content:"✓";position:absolute;left:0;color:var(--magenta);font-weight:900}.inf-mix{background:#fff7d2;display:flex;flex-direction:column;justify-content:center}.inf-mix strong{font-family:var(--disp);font-size:20px;color:var(--plum)}.inf-mix>span{font-size:22px;color:var(--magenta);font-weight:800}.inf-mix small{font-size:10px;line-height:1.5;color:var(--soft);margin-top:14px} @keyframes titleReveal{0%{opacity:0;transform:translateY(34px) skewX(-9deg) rotate(-3deg);filter:blur(10px)}55%{opacity:1;filter:blur(0)}100%{transform:translateY(0) skewX(0) rotate(-1.5deg)}}@keyframes ammuEntrance{from{opacity:0;transform:translate(45px,35px) scale(.88) rotate(2deg)}to{opacity:1;transform:none}}@keyframes grainShake{0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}@keyframes logoPulse{50%{opacity:.23;transform:translateY(-50%) rotate(-5deg) scale(1.19)}}@keyframes logoDrift{50%{transform:translateY(-52%) translateX(-2%) rotate(-3deg)}}@keyframes beamSweep{0%,100%{transform:translateX(-20%) rotate(-24deg);opacity:.08}50%{transform:translateX(55%) rotate(-24deg);opacity:.25}}@keyframes emberRise{0%{transform:translate(0,0);opacity:0}12%{opacity:1}100%{transform:translate(var(--drift),-110vh);opacity:0}}@keyframes wordmarkFloat{50%{transform:translate(-50%,-53%) rotate(-4deg)}}@keyframes ringPulse{50%{transform:scale(1.06);opacity:.55}}@keyframes ringSpin{to{transform:rotate(360deg)}}@keyframes cardFloat{50%{transform:translateY(-10px) rotate(var(--r,0deg))}}@keyframes marqueeV17{to{transform:translateX(-50%)}} @media(max-width:980px){.hero-grid-v17{grid-template-columns:1fr;gap:0;padding-top:90px}.hero-v17{min-height:auto}.hero-art-v17{min-height:500px}.hero-v17 h1{font-size:clamp(68px,15vw,118px)!important}.cinema-logo{width:105vw;right:-30vw;top:62%}.hero-copy-v17{max-width:720px}.hero-mass-card.card-a{left:8%}.hero-mass-card.card-b{right:6%}.hero-mass-card.card-c{right:10%}.influencer-price-card-v17{grid-template-columns:1fr 1fr}.inf-price-main{grid-column:1/-1}.inf-includes{border-right:1px solid rgba(67,16,127,.12)}} @media(max-width:640px){.hero-grid-v17{padding:92px 20px 72px}.hero-v17 h1{font-size:clamp(62px,19vw,90px)!important}.hero-v17 .hero-sub{font-size:22px}.hero-art-v17{min-height:420px;margin-top:10px}.hero-ammu-v17{max-width:325px!important}.hero-ammu-v17 .ch{max-height:405px!important}.mass-ring.ring-one{width:300px;height:300px}.mass-ring.ring-two{width:390px;height:390px}.hero-wordmark{font-size:74px}.hero-mass-card{min-width:115px;padding:8px 9px}.hero-mass-card strong{font-size:13px}.card-a{left:-3%;top:22%}.card-b{right:-5%;top:34%}.card-c{right:0;bottom:9%}.cinema-logo{width:155vw;right:-64vw;top:69%}.hero-channel-row{display:none}.influencer-price-card-v17{grid-template-columns:1fr}.inf-price-main{grid-column:auto}.inf-includes{border-right:0;border-bottom:1px solid rgba(67,16,127,.12)}.influencer-price-card-v17>div{padding:22px}.gate-v16 .pick-script{font-size:38px}} @media(prefers-reduced-motion:reduce){.cinema-grain,.cinema-logo,.cinema-beam,.ember-field i,.cinema-title,.hero-ammu-v17,.mass-ring,.hero-mass-card,.hero-marquee-v17 div,.hero-wordmark{animation:none!important}} /* ============================================================ V18 — ORIGINAL BRAND PALETTE + ALIGNMENT + CONTENT SYSTEM Original Ammesthaam palette: Navy #0C123C / Purple #5A18A8 / Violet #8B4DE0 / Gold #FCCC00 ============================================================ */ .hero-v17{ background: radial-gradient(circle at 76% 34%,rgba(90,24,168,.68),transparent 30%), radial-gradient(circle at 28% 88%,rgba(139,77,224,.28),transparent 34%), linear-gradient(128deg,#060A26 0%,#0C123C 42%,#29105D 72%,#5A18A8 100%) !important; } .hero-v17:before{background:linear-gradient(90deg,#FCCC00 0 33%,#5A18A8 33% 68%,#8B4DE0 68% 100%) !important} .cinema-beam{background:linear-gradient(90deg,transparent,#FCCC00,transparent)!important} .beam-b{background:linear-gradient(90deg,transparent,#8B4DE0,transparent)!important} .ember-field i{background:#FCCC00!important;box-shadow:0 0 10px #FCCC00,0 0 22px rgba(139,77,224,.70)!important} .cinema-title{ color:#FFFDF5!important; text-shadow:0 3px 0 #5A18A8,0 7px 0 rgba(6,10,38,.82),0 0 34px rgba(252,204,0,.28)!important; } .hero-v17 .hero-pretitle,.hero-mass-card small{color:#FCCC00!important} .btn-cinema{ background:#FCCC00!important;color:#0C123C!important;border-color:#FFD829!important; box-shadow:0 0 0 4px rgba(252,204,0,.10),8px 8px 0 #5A18A8!important; } .btn-cinema:hover{box-shadow:0 0 30px rgba(252,204,0,.28),11px 11px 0 #5A18A8!important} .hero-marquee-v17{background:#FCCC00!important;color:#0C123C!important} .cinema-logo-back{filter:blur(18px) saturate(1.35) drop-shadow(0 0 50px rgba(252,204,0,.36))!important} .cinema-logo-front{filter:grayscale(1) brightness(2.4) sepia(1) hue-rotate(215deg) saturate(3)!important} /* Global alignment QA */ main{overflow:clip} .wrap{width:min(1180px,calc(100% - (2 * var(--pad))))} .page-head{padding-block:clamp(52px,6.6vw,84px)!important} .page-head .plat-head{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(270px,.72fr);gap:clamp(24px,5vw,72px);align-items:center} .page-head .plat-head>div{min-width:0} .page-head .plat-head .zoom{display:grid;place-items:center;min-height:340px} .page-head .plat-head .ammu{max-width:min(100%,370px)!important} .page-head h1{overflow-wrap:anywhere} .blocks,.linkgrid,.cgrid,.plain-grid,.proof-grid,.packs{align-items:stretch} .bk,.lk,.pk,.svc-long,.person,.proof-card{height:100%} .bk h2,.lk strong,.pk h3{overflow-wrap:anywhere} .stats{align-items:stretch} .st-cell{display:flex;flex-direction:column;justify-content:center} img{max-width:100%} .nav-links{gap:clamp(10px,1.35vw,22px)!important} .nav-links a{font-size:13px} .foot-cols{align-items:start} .foot-cols>div{min-width:0} @media(max-width:960px){ .page-head .plat-head{grid-template-columns:1fr} .page-head .plat-head .zoom{min-height:280px} .page-head .plat-head .ammu{max-width:300px!important} } @media(max-width:760px){ .page-head{padding-top:42px!important} .stats{grid-template-columns:1fr!important} .st-cell{min-height:0!important;padding-block:18px} .linkgrid,.blocks,.plain-grid,.cgrid{grid-template-columns:1fr!important} } @media(max-width:1120px){.nav-links a:nth-last-child(2){display:none}} @media(max-width:820px){.nav-links{display:none!important}} /* Answer-first blocks for AEO / AI search clarity */ .answer-strip-v18{padding-block:clamp(38px,4vw,56px);background:#fff} .answer-card-v18{ display:grid;grid-template-columns:190px 1fr;gap:clamp(20px,4vw,55px);align-items:start; border:2px solid var(--navy);border-radius:24px;padding:clamp(22px,3vw,36px); box-shadow:8px 8px 0 rgba(90,24,168,.12);background:linear-gradient(135deg,#FFFDF5,#F2ECFF); } .answer-card-v18 .answer-label{font:800 11px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--purple)} .answer-card-v18 h2{margin:0 0 12px;font:700 clamp(24px,3vw,38px)/1.05 var(--disp);color:var(--navy)} .answer-card-v18 p{margin:0;max-width:72ch;color:var(--soft);line-height:1.7} .answer-card-v18 .answer-facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px} .answer-card-v18 .answer-facts span{border:1px solid rgba(12,18,60,.14);background:#fff;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:700;color:var(--navy)} @media(max-width:720px){.answer-card-v18{grid-template-columns:1fr;gap:12px}} /* Related insight internal-link block */ .related-insights-v18{background:#0C123C;color:#fff} .related-insights-v18 .tag{color:#FCCC00} .related-insights-v18 h2{color:#fff!important} .insight-grid-v18{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px} .insight-card-v18{ display:flex;flex-direction:column;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);border-radius:18px;padding:22px;min-height:190px;transition:.25s ease } .insight-card-v18:hover{transform:translateY(-4px);background:rgba(255,255,255,.10);border-color:rgba(252,204,0,.55)} .insight-card-v18 small{color:#FCCC00;font-size:10px;letter-spacing:.12em;font-weight:800;text-transform:uppercase} .insight-card-v18 strong{font:700 21px/1.08 var(--disp);margin:14px 0 10px} .insight-card-v18 span{font-size:13px;line-height:1.55;color:rgba(255,255,255,.66);margin-bottom:18px} .insight-card-v18 b{margin-top:auto;color:#FCCC00;font-size:12px} @media(max-width:800px){.insight-grid-v18{grid-template-columns:1fr}} /* Blog */ .blog-hero-v18{background:linear-gradient(135deg,#FFFDF5 0%,#F2ECFF 58%,#FFF3C4 100%);padding-block:clamp(70px,9vw,120px) clamp(54px,7vw,90px);border-bottom:1px solid rgba(12,18,60,.12)} .blog-hero-v18 .blog-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--purple)} .blog-hero-v18 h1{font:700 clamp(48px,8vw,104px)/.9 var(--disp);letter-spacing:-.05em;color:var(--navy);max-width:10ch;margin:13px 0 24px} .blog-hero-v18 p{font-size:clamp(18px,2vw,24px);line-height:1.35;max-width:50ch;color:var(--soft)} .blog-grid-v18{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .blog-card-v18{border:1.5px solid rgba(12,18,60,.18);border-radius:20px;padding:24px;text-decoration:none;color:var(--navy);background:#fff;display:flex;flex-direction:column;min-height:310px;transition:.22s ease} .blog-card-v18:hover{transform:translateY(-5px);box-shadow:8px 8px 0 rgba(90,24,168,.12)} .blog-card-v18 .cat{font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--purple);text-transform:uppercase} .blog-card-v18 h2{font:700 26px/1.06 var(--disp);margin:16px 0 12px} .blog-card-v18 p{font-size:14px;line-height:1.6;color:var(--soft)} .blog-card-v18 .read{margin-top:auto;padding-top:20px;font-size:12px;font-weight:800;color:var(--purple)} @media(max-width:900px){.blog-grid-v18{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.blog-grid-v18{grid-template-columns:1fr}} .article-v18{padding-block:clamp(54px,7vw,90px)} .article-wrap-v18{width:min(780px,calc(100% - 36px));margin:auto} .article-v18 .eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--purple)} .article-v18 h1{font:700 clamp(42px,6.7vw,76px)/.93 var(--disp);letter-spacing:-.045em;color:var(--navy);margin:15px 0 20px} .article-deck-v18{font-size:clamp(19px,2.3vw,25px);line-height:1.35;color:var(--soft);margin-bottom:18px} .article-meta-v18{font-size:12px;color:var(--slate);padding-bottom:28px;border-bottom:1px solid rgba(12,18,60,.13)} .article-body-v18{font-size:17px;line-height:1.78;color:#343957} .article-body-v18 h2{font:700 clamp(28px,4vw,40px)/1.05 var(--disp);color:var(--navy);margin:52px 0 17px} .article-body-v18 h3{font:700 23px/1.15 var(--disp);color:var(--navy);margin:34px 0 12px} .article-body-v18 p{margin:0 0 21px} .article-body-v18 ul{padding-left:22px;margin:0 0 26px}.article-body-v18 li{margin-bottom:10px} .article-body-v18 a{color:var(--purple);font-weight:650} .article-callout-v18{border-left:5px solid var(--gold);background:#FFF9DD;padding:20px 22px;margin:30px 0;border-radius:0 14px 14px 0} .article-answer-v18{background:#0C123C;color:#fff;padding:24px;border-radius:18px;margin:28px 0} .article-answer-v18 strong{display:block;color:#FCCC00;font:700 22px var(--disp);margin-bottom:8px} .article-answer-v18 p{margin:0;color:rgba(255,255,255,.78)} .article-related-v18{margin-top:55px;padding-top:32px;border-top:1px solid rgba(12,18,60,.12)} .article-related-v18 a{display:block;padding:13px 0;border-bottom:1px solid rgba(12,18,60,.09);text-decoration:none} /* Footer/blog discovery */ .foot a[href="blog.html"]{color:var(--yellow)!important;font-weight:700}