:root{ --void:#0B0B0F; --panel:#15151C; --panel-2:#1E1E28; --paper:#F4F2EC; --paper-2:#E7E4DA; --electric:#4D5BFF; --lime:#C6F24E; --flame:#FF5C35; --bubble:#FF4FA3; --sun:#FFC53D; --on-dark:#F2F1EC; --on-dark-dim:#9A99A6; --on-light:#131318; --on-light-dim:#5B5A63; /* Ganti baris --f-display ini bila memakai alternatif (lihat catatan di ). Alternatif A: "Familjen Grotesk" · Alternatif B: "Epilogue" */ --f-display:"Gabarito","Trebuchet MS",system-ui,sans-serif; --f-body:"DM Sans","Segoe UI",Helvetica,Arial,sans-serif; --f-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace; --wrap:1220px; --r:18px; --r-lg:30px; /* WhatsApp brand colours — the logo is a WHITE glyph on #25D366. #075E54 is the brand's dark teal, used here only for edge definition. */ --wa:#25D366; --wa-deep:#075E54; --wa-on:#FFFFFF; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;} body{margin:0;background:var(--void);color:var(--on-dark);font-family:var(--f-body); font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased; overflow-x:hidden; /* baseline for older engines */ overflow-wrap:break-word;word-wrap:break-word;} /* overflow-x:clip does not create a scroll container, so it never breaks the sticky header the way overflow-x:hidden can in some engines. */ @supports (overflow-x:clip){body{overflow-x:clip;}} img,video,iframe{max-width:100%;} img,video{display:block;height:auto;} a{color:inherit;} button{font:inherit;color:inherit;} :focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px;} /* Tracking is looser than the previous display face used: Gabarito's bowls are rounder, so the very tight -.03em it was set at made the counters close up. */ h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:1.02;letter-spacing:-.022em; text-wrap:balance;margin:0;} h1{font-size:clamp(2.7rem,8.4vw,6.4rem);font-weight:900;letter-spacing:-.028em;line-height:.99;} h2{font-size:clamp(2.1rem,5.2vw,4rem);} h3{font-size:clamp(1.2rem,1.9vw,1.55rem);letter-spacing:-.015em;line-height:1.12;} p{margin:0;} /* Physical properties first as a fallback for Safari < 14.1 / older WebViews, then the logical ones (which also carry the notch safe-area insets). */ .wrap{max-width:var(--wrap);margin-left:auto;margin-right:auto; padding-left:24px;padding-right:24px; padding-left:calc(24px + env(safe-area-inset-left)); padding-right:calc(24px + env(safe-area-inset-right));} .stack{display:flex;flex-direction:column;} .sec{padding-block:clamp(66px,9vw,120px);background:var(--bg);color:var(--fg);position:relative;} /* --tint / --tint-2 are STATIC rgba values, not color-mix(): color-mix has no support in Safari < 16.2 or older Android WebViews, and a failed declaration there leaves placeholder blocks with no fill at all. */ .s-void{--bg:var(--void);--fg:var(--on-dark);--dim:var(--on-dark-dim); --tint:rgba(242,241,236,.06);--tint-2:rgba(242,241,236,.14);} .s-panel{--bg:var(--panel);--fg:var(--on-dark);--dim:var(--on-dark-dim); --tint:rgba(242,241,236,.06);--tint-2:rgba(242,241,236,.14);} .s-paper{--bg:var(--paper);--fg:var(--on-light);--dim:var(--on-light-dim); --tint:rgba(19,19,24,.055);--tint-2:rgba(19,19,24,.12);} .s-lime{--bg:var(--lime);--fg:#12190A;--dim:#3D4A24; --tint:rgba(18,25,10,.07);--tint-2:rgba(18,25,10,.15);} .s-bubble{--bg:var(--bubble);--fg:#2B0716;--dim:#6E1F44; --tint:rgba(43,7,22,.08);--tint-2:rgba(43,7,22,.16);} .s-sun{--bg:var(--sun);--fg:#2A1C00;--dim:#6B4E11; --tint:rgba(42,28,0,.08);--tint-2:rgba(42,28,0,.16);} :root{--tint:rgba(242,241,236,.06);--tint-2:rgba(242,241,236,.14);} .eyebrow{font-family:var(--f-mono);font-size:.74rem;font-weight:500;letter-spacing:.18em; text-transform:uppercase;color:var(--dim);display:inline-flex;align-items:center;gap:.7em;} .eyebrow::before{content:"";width:26px;height:2px;background:currentColor;flex:none;opacity:.6;} .lede{font-size:clamp(1.03rem,1.5vw,1.24rem);color:var(--dim);max-width:60ch;} .sticker{display:inline-block;font-family:var(--f-mono);font-size:.72rem;font-weight:500; letter-spacing:.12em;text-transform:uppercase;padding:.5em 1em;border-radius:100px; transform:rotate(-2.5deg);border:2px solid currentColor;} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:1em 1.8em; border-radius:100px;border:2px solid transparent;font-family:var(--f-body);font-weight:700; font-size:1rem;text-decoration:none;cursor:pointer; transition:transform .16s cubic-bezier(.3,1.4,.5,1),background .16s,color .16s,border-color .16s;} .btn:hover{transform:translateY(-3px) rotate(-1deg);} .btn-lime{background:var(--lime);color:#12190A;border-color:var(--lime);} .btn-flame{background:var(--flame);color:#FFF;border-color:var(--flame);} .btn-ink{background:var(--on-light);color:var(--paper);border-color:var(--on-light);} .btn-out{border-color:currentColor;color:inherit;background:transparent;} .btn-sm{padding:.62em 1.15em;font-size:.88rem;} .btn .arw{transition:transform .16s;} .btn:hover .arw{transform:translateX(3px);} /* header */ .hdr{position:-webkit-sticky;position:sticky;top:0;z-index:80; background:rgba(11,11,15,.94); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border-bottom:1px solid #26262F;} @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .hdr{background:rgba(11,11,15,.82);} } .hdr-in{display:flex;align-items:center;gap:18px;height:74px;} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;} .mark{width:38px;height:38px;border-radius:12px;flex:none;background:var(--lime);color:#12190A; display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:1rem; letter-spacing:-.035em;transform:rotate(-4deg);} .brand-name{font-family:var(--f-display);font-weight:800;font-size:1.06rem;letter-spacing:-.02em; line-height:1.1;display:block;color:var(--on-dark);} .brand-sub{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase; color:var(--on-dark-dim);} .nav{display:flex;gap:22px;} .nav a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--on-dark-dim); transition:color .15s;padding-block:4px;border-bottom:2px solid transparent;} .nav a:hover{color:var(--lime);} .nav a[aria-current="page"]{color:var(--lime);border-color:var(--lime);} .lang{display:flex;border:2px solid #33333F;border-radius:100px;overflow:hidden;flex:none;} .lang button{background:none;border:0;cursor:pointer;font-family:var(--f-mono);font-size:.72rem; font-weight:500;letter-spacing:.09em;padding:.62em .9em;color:var(--on-dark-dim); min-height:42px;transition:background .15s,color .15s;} .lang button[aria-pressed="true"]{background:var(--lime);color:#12190A;} /* burger — hidden on desktop, revealed with the nav breakpoint below */ .burger{display:none;width:46px;height:46px;flex:none;border:2px solid #33333F; border-radius:13px;background:transparent;cursor:pointer;padding:0; align-items:center;justify-content:center;} .burger span{display:block;position:relative;width:19px;height:2px;border-radius:2px; background:var(--on-dark);transition:background .18s;} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px; border-radius:2px;background:var(--on-dark);transition:transform .22s ease,top .18s ease;} .burger span::before{top:-6px;} .burger span::after{top:6px;} .hdr[data-open="true"] .burger span{background:transparent;} .hdr[data-open="true"] .burger span::before{top:0;transform:rotate(45deg);} .hdr[data-open="true"] .burger span::after{top:0;transform:rotate(-45deg);} /* hero */ .hero{position:relative;overflow:hidden;padding-block:clamp(58px,8vw,108px) clamp(44px,5vw,78px); background:var(--void);} .blobs{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none; filter:blur(72px);opacity:.5;overflow:hidden;} .blob{position:absolute;border-radius:50%;} /* min()/max() keep the blobs from driving layout width on very wide or very narrow viewports; vw alone overshoots once a scrollbar is present. */ .b1{width:min(44vw,620px);height:min(44vw,620px);background:var(--electric); top:-14%;right:-8%;animation:f1 19s ease-in-out infinite;} .b2{width:min(32vw,460px);height:min(32vw,460px);background:var(--bubble); bottom:-16%;left:-6%;animation:f2 23s ease-in-out infinite;} .b3{width:min(26vw,380px);height:min(26vw,380px);background:var(--lime); top:34%;right:26%;opacity:.55;animation:f3 27s ease-in-out infinite;} @media (max-width:700px){.blobs{filter:blur(56px);opacity:.42;}} @keyframes f1{50%{transform:translate(-5%,7%) scale(1.12);}} @keyframes f2{50%{transform:translate(8%,-6%) scale(.9);}} @keyframes f3{50%{transform:translate(-9%,9%) scale(1.16);}} .hero-in{position:relative;z-index:2;gap:28px;} .hero h1{max-width:17ch;} .hero h1 em{font-style:normal;color:var(--lime);} .hero h1 .u{color:var(--sun);position:relative;white-space:nowrap;} .hero h1 .u::after{content:"";position:absolute;left:-.02em;right:-.02em;bottom:.02em; height:.085em;background:var(--flame);border-radius:100px;transform:rotate(-.7deg);} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px;} .chips{display:flex;flex-wrap:wrap;gap:9px;padding-top:18px;} .chip{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;border:1.5px solid #34343F; border-radius:100px;padding:.45em 1em;color:var(--on-dark-dim);} .chip b{color:var(--lime);font-weight:500;} /* marquee */ .mq{background:var(--lime);color:#12190A;overflow:hidden;padding-block:15px;border-block:3px solid var(--void);} .mq-track{display:flex;width:max-content;animation:slide 30s linear infinite;} .mq span{font-family:var(--f-display);font-weight:800;font-size:clamp(1.15rem,2.5vw,2rem); letter-spacing:-.03em;padding-inline:24px;display:flex;align-items:center;gap:24px;white-space:nowrap;} .mq span::after{content:"";width:11px;height:11px;border-radius:50%;background:#12190A;flex:none;} @keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}} .mq2{background:var(--electric);color:#fff;} .mq2 span::after{background:#fff;} .mq2 .mq-track{animation-duration:38s;animation-direction:reverse;} /* stats */ .stats{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:16px;} @media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.stats{grid-template-columns:1fr;}} .stat{border:3px solid currentColor;border-radius:var(--r-lg);padding:30px 24px;display:flex; flex-direction:column;gap:8px;transition:transform .2s;} .stat:nth-child(4n+1){background:var(--electric);color:#fff;border-color:var(--electric);} .stat:nth-child(4n+2){background:var(--bubble);color:#2B0716;border-color:var(--bubble);} .stat:nth-child(4n+3){background:var(--sun);color:#2A1C00;border-color:var(--sun);} .stat:nth-child(4n+4){background:var(--lime);color:#12190A;border-color:var(--lime);} .stat:hover{transform:translateY(-6px) rotate(-1deg);} .num{font-family:var(--f-display);font-weight:900;font-size:clamp(2.5rem,5.2vw,3.9rem); letter-spacing:-.035em;line-height:.95;font-variant-numeric:tabular-nums;} .stat-lbl{font-family:var(--f-mono);font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;opacity:.78;} /* placeholders */ .ph{border:2px dashed currentColor;border-radius:var(--r);display:grid;place-items:center; text-align:center;padding:18px;gap:7px;min-height:118px; background:var(--tint);} .ph-tag{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase; background:currentColor;border-radius:100px;padding:.3em .75em;} .ph-tag span{color:var(--bg);} .ph-logo{min-height:74px;} .ph-16x9{aspect-ratio:16/9;min-height:0;} .ph-9x16{aspect-ratio:9/16;min-height:0;} .ph-1x1{aspect-ratio:1/1;min-height:0;} .logos{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;} @media (max-width:900px){.logos{grid-template-columns:repeat(3,1fr);}} /* cards */ .svc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} @media (max-width:960px){.svc{grid-template-columns:repeat(2,1fr);}} @media (max-width:620px){.svc{grid-template-columns:1fr;}} .card{border:3px solid var(--on-light);border-radius:var(--r-lg);padding:28px 25px;display:flex; flex-direction:column;gap:12px;background:var(--paper);color:var(--on-light); transition:transform .2s cubic-bezier(.3,1.3,.5,1),background .2s,box-shadow .2s;} .card:hover{transform:translateY(-7px) rotate(-.8deg);box-shadow:10px 12px 0 var(--on-light);} .card:nth-child(5n+1):hover{background:var(--lime);} .card:nth-child(5n+2):hover{background:var(--sun);} .card:nth-child(5n+3):hover{background:var(--bubble);} .card:nth-child(5n+4):hover{background:var(--electric);color:#fff;} .card:nth-child(5n+5):hover{background:var(--flame);color:#fff;} .card p{font-size:.92rem;color:var(--on-light-dim);} .card:hover p{color:inherit;opacity:.86;} .ico{width:50px;height:50px;border-radius:15px;border:3px solid currentColor;display:grid; place-items:center;flex:none;margin-bottom:5px;} .ico svg{width:23px;height:23px;} /* two tracks */ .tracks{display:grid;grid-template-columns:1fr 1fr;gap:18px;} @media (max-width:880px){.tracks{grid-template-columns:1fr;}} .track{border:3px solid currentColor;border-radius:var(--r-lg);padding:clamp(26px,3.4vw,40px); display:flex;flex-direction:column;gap:17px;text-decoration:none;transition:transform .2s,background .2s;} .track:hover{transform:translateY(-7px);} .track-a{color:var(--electric);} .track-a:hover{background:rgba(77,91,255,.15);} .track-b{color:var(--bubble);} .track-b:hover{background:rgba(255,79,163,.15);} .track h3{color:var(--on-dark);} .track p{color:var(--on-dark-dim);font-size:.95rem;} .track ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;color:var(--on-dark);} .track li{display:flex;gap:11px;font-size:.92rem;} .track li::before{content:"→";font-family:var(--f-mono);opacity:.6;flex:none;} .track .go{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase; display:inline-flex;gap:.5em;align-items:center;} /* steps */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s;} @media (max-width:960px){.steps{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.steps{grid-template-columns:1fr;}} .step{position:relative;padding-top:32px;border-top:4px solid currentColor;} .step::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;top:0; left:0;transform:translateY(-115%);font-family:var(--f-display);font-weight:800;font-size:1.35rem; letter-spacing:-.03em;} .step h3{margin-bottom:8px;} .step p{font-size:.9rem;color:var(--dim);} /* case studies */ .cases{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;} @media (max-width:880px){.cases{grid-template-columns:1fr;}} .case{border:3px solid currentColor;border-radius:var(--r-lg);padding:28px;display:flex; flex-direction:column;gap:18px;transition:transform .2s;} .case:hover{transform:translateY(-5px);} .case-top{display:flex;gap:16px;align-items:flex-start;} .case-logo{width:56px;height:56px;border-radius:14px;border:2px dashed currentColor;flex:none; display:grid;place-items:center;font-family:var(--f-mono);font-size:.5rem;letter-spacing:.1em; text-align:center;opacity:.75;} .case-meta{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase; opacity:.7;display:block;margin-top:3px;} .case-nums{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-block:2px solid currentColor; padding-block:16px;} .case-n{font-family:var(--f-display);font-weight:900;font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;display:block;} .case-nl{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase; opacity:.7;margin-top:6px;display:block;} .case q{font-style:normal;font-size:.94rem;opacity:.9;display:block;} .case cite{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; opacity:.65;font-style:normal;margin-top:9px;display:block;} /* testimonial wall */ .wall{columns:3;column-gap:16px;} @media (max-width:1000px){.wall{columns:2;}} @media (max-width:640px){.wall{columns:1;}} .tw{break-inside:avoid;margin-bottom:16px;border:3px solid currentColor;border-radius:var(--r-lg); padding:24px;display:flex;flex-direction:column;gap:15px;} .tw-q{font-size:.94rem;opacity:.92;} .tw-who{display:flex;align-items:center;gap:12px;border-top:2px solid currentColor;padding-top:15px;} .tw-av{width:40px;height:40px;border-radius:50%;flex:none;border:2px dashed currentColor;} .tw-n{font-weight:700;font-size:.9rem;display:block;} .tw-r{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;opacity:.65;} /* gallery */ .gal-tabs{display:flex;flex-wrap:wrap;gap:9px;} .gal-tab{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase; border:2px solid currentColor;background:transparent;border-radius:100px;padding:.5em 1.1em; cursor:pointer;transition:background .15s,color .15s;} .gal-tab[aria-pressed="true"]{background:currentColor;} .gal-tab[aria-pressed="true"] span{color:var(--bg);} .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start;} @media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr);}} .gal-item.wide{grid-column:span 2;} .gal-item[hidden]{display:none;} /* pricing */ .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;} @media (max-width:960px){.tiers{grid-template-columns:1fr;}} .tier{border:3px solid currentColor;border-radius:var(--r-lg);padding:30px 27px;display:flex; flex-direction:column;gap:17px;position:relative;} .tier-hot{background:var(--lime);color:#12190A;border-color:#12190A;box-shadow:9px 11px 0 #12190A;} .tier-badge{position:absolute;top:-16px;left:24px;background:var(--flame);color:#fff; font-family:var(--f-mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase; padding:.45em .95em;border-radius:100px;transform:rotate(-3deg);border:2px solid #12190A;} .tier-name{font-family:var(--f-display);font-weight:800;font-size:1.45rem;letter-spacing:-.02em;} .tier-price{font-family:var(--f-display);font-weight:900;font-size:clamp(1.9rem,3.4vw,2.6rem); letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums;} .tier-per{font-family:var(--f-mono);font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7;} .tier ul{list-style:none;margin:0;padding:17px 0 0;display:flex;flex-direction:column;gap:10px; border-top:2px solid currentColor;} .tier li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;} .tier li::before{content:"\2733";flex:none;opacity:.8;} .was{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;flex-wrap:wrap; font-family:var(--f-mono);font-size:.79rem;letter-spacing:.04em;} .was s{opacity:.55;text-decoration-thickness:2px;} .off{font-family:var(--f-mono);font-size:.63rem;font-weight:500;letter-spacing:.12em; text-transform:uppercase;background:var(--flame);color:#fff;border-radius:100px;padding:.28em .7em;} .tier-hot .off{background:#12190A;color:var(--lime);} .save{font-family:var(--f-mono);font-size:.71rem;letter-spacing:.06em;margin-top:8px;opacity:.8;} .promo-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;background:var(--flame); color:#fff;border-radius:var(--r-lg);padding:22px 26px;border:3px solid var(--fg);} .pb-head{font-family:var(--f-display);font-weight:800;font-size:clamp(1.1rem,2.1vw,1.55rem); letter-spacing:-.03em;line-height:1.05;margin-right:auto;} .pb-note{font-family:var(--f-mono);font-size:.71rem;letter-spacing:.06em;opacity:.9; flex:1 1 250px;line-height:1.5;} .pb-pill{font-family:var(--f-display);font-weight:900;font-size:1.5rem;letter-spacing:-.03em; background:#fff;color:var(--flame);border-radius:100px;padding:.25em .8em;transform:rotate(-3deg);flex:none;} /* offer + referral */ .duo{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;} @media (max-width:900px){.duo{grid-template-columns:1fr;}} .panel{border:3px solid currentColor;border-radius:var(--r-lg);padding:clamp(26px,3.2vw,38px); display:flex;flex-direction:column;gap:16px;} .panel-solid{background:var(--sun);color:#2A1C00;border-color:#2A1C00;box-shadow:9px 11px 0 #2A1C00;} .big-pct{font-family:var(--f-display);font-weight:900;font-size:clamp(3rem,7vw,4.6rem); letter-spacing:-.035em;line-height:.95;} .panel ol{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:9px;font-size:.93rem;} .panel ol li::marker{font-family:var(--f-mono);font-size:.85em;} /* faq */ .faq{max-width:850px;margin-inline:auto;} details{border-bottom:2px solid currentColor;} details:first-of-type{border-top:2px solid currentColor;} summary{cursor:pointer;list-style:none;padding:22px 46px 22px 0;position:relative; font-family:var(--f-display);font-weight:700;font-size:clamp(1.02rem,1.6vw,1.26rem);letter-spacing:-.02em;} summary::-webkit-details-marker{display:none;} summary::after{content:"";position:absolute;right:8px;top:50%;width:16px;height:3px; background:currentColor;border-radius:2px;transform:translateY(-50%);} summary::before{content:"";position:absolute;right:14.5px;top:50%;width:3px;height:16px; background:currentColor;border-radius:2px;transform:translateY(-50%);transition:transform .2s;} details[open] summary::before{transform:translateY(-50%) scaleY(0);} details p{padding:0 46px 24px 0;font-size:.95rem;color:var(--dim);max-width:64ch;} /* booking */ .book{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;align-items:start;} @media (max-width:960px){.book{grid-template-columns:1fr;}} .cal-slot{border:3px dashed currentColor;border-radius:var(--r-lg);min-height:420px;padding:30px; display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;text-align:center; background:var(--tint);} .cal-slot code{font-family:var(--f-mono);font-size:.72rem;background:var(--tint-2); padding:.3em .55em;border-radius:6px;word-break:break-all;overflow-wrap:anywhere;max-width:100%;} .cal-how{font-size:.85rem;max-width:46ch;opacity:.8;line-height:1.55;} .c-item{display:flex;align-items:center;gap:15px;padding:19px 0;text-decoration:none; border-bottom:2px solid currentColor;transition:padding-left .2s;} .c-item:first-child{border-top:2px solid currentColor;} .c-item:hover{padding-left:10px;} .c-item svg{width:22px;height:22px;flex:none;} .c-k{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase; opacity:.65;display:block;} .c-v{font-weight:700;font-size:1.08rem;} /* footer */ .ftr{background:var(--void);color:var(--on-dark);padding-block:54px 32px;border-top:1px solid #26262F;} .ftr-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;} @media (max-width:900px){.ftr-in{grid-template-columns:1fr 1fr;}} @media (max-width:560px){.ftr-in{grid-template-columns:1fr;}} .ftr h4{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase; color:var(--on-dark-dim);margin:0 0 15px;font-weight:500;} .f-links{display:flex;flex-direction:column;gap:10px;} .f-links a{text-decoration:none;font-size:.92rem;color:var(--on-dark);opacity:.75;width:fit-content; transition:color .15s,opacity .15s;} .f-links a:hover{color:var(--lime);opacity:1;} .ftr-bot{margin-top:38px;padding-top:22px;border-top:1px solid #26262F;display:flex;flex-wrap:wrap; gap:10px;justify-content:space-between;font-family:var(--f-mono);font-size:.67rem; letter-spacing:.07em;color:var(--on-dark-dim);} .note{display:flex;gap:13px;align-items:flex-start;border:2px dashed currentColor; border-radius:var(--r);padding:16px 20px;font-size:.87rem;} .rv{opacity:0;transform:translateY(24px); transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1);} .rv.in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ .mq-track,.blob{animation:none;} .rv{opacity:1;transform:none;transition:none;} .btn:hover,.card:hover,.stat:hover,.track:hover,.case:hover{transform:none;} html{scroll-behavior:auto;} } /* ════════════════════════════════════════════════════════════════════ COMPATIBILITY ════════════════════════════════════════════════════════════════════ */ /* aspect-ratio: Safari 14 and older Android WebViews ignore it, which collapses every placeholder to zero height. Padding-ratio fallback. */ @supports not (aspect-ratio:1/1){ .ph-16x9,.ph-9x16,.ph-1x1{position:relative;height:0;overflow:hidden;} .ph-16x9{padding-top:56.25%;} .ph-9x16{padding-top:177.78%;} .ph-1x1{padding-top:100%;} .ph-16x9 > *,.ph-9x16 > *,.ph-1x1 > *{position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);} } /* Safari needs an explicit display on summary or the disclosure triangle stays */ summary{display:block;} summary::-webkit-details-marker{display:none;} /* Anchor targets must clear the sticky header, otherwise #pricing and #faq land with their heading hidden underneath it. */ [id]{scroll-margin-top:92px;} @media (max-width:640px){[id]{scroll-margin-top:80px;}} /* iOS momentum scrolling inside any horizontally scrollable area */ .gallery,.wall,.tiers,.stats{-webkit-overflow-scrolling:touch;} /* Tap targets: 44px minimum on anything finger-operated */ @media (pointer:coarse){ .btn{min-height:48px;} .btn-sm{min-height:44px;} .nav a,.f-links a,.c-item{min-height:44px;display:flex;align-items:center;} .gal-tab{min-height:44px;} summary{padding-top:20px;padding-bottom:20px;} } /* Hover effects only where a real pointer exists — on touch they stick "on" */ @media (hover:none){ .btn:hover,.card:hover,.stat:hover,.track:hover,.case:hover{ transform:none;box-shadow:none;} .card:hover{background:var(--paper);color:var(--on-light);} .card:hover p{color:var(--on-light-dim);} .track-a:hover,.track-b:hover{background:transparent;} } /* ════════════════════════════════════════════════════════════════════ RESPONSIVE — mobile navigation ════════════════════════════════════════════════════════════════════ */ @media (max-width:1040px){ .burger{display:flex;} .nav{ position:absolute;top:100%;left:0;right:0; flex-direction:column;gap:0; background:var(--panel);border-bottom:1px solid #26262F; padding:8px 24px 20px; max-height:0;overflow:hidden;visibility:hidden; transition:max-height .28s ease,visibility 0s linear .28s; } .hdr[data-open="true"] .nav{ max-height:70vh;overflow-y:auto;visibility:visible; transition:max-height .28s ease,visibility 0s; } .nav a{ font-size:1.05rem;padding:15px 0;border-bottom:1px solid #26262F; border-top:0;width:100%; } .nav a:last-child{border-bottom:0;} .nav a[aria-current="page"]{border-bottom-color:#26262F;} .hdr-in{position:relative;} } @media (min-width:1041px){ .burger{display:none !important;} .nav{max-height:none;visibility:visible;overflow:visible;} } /* ════════════════════════════════════════════════════════════════════ RESPONSIVE — layout down the sizes ════════════════════════════════════════════════════════════════════ */ /* small laptops */ @media (max-width:1100px){ :root{--r-lg:26px;} .wall{columns:2;} } /* tablets */ @media (max-width:820px){ :root{--r:15px;--r-lg:22px;} .sec{padding-top:clamp(52px,8vw,80px);padding-bottom:clamp(52px,8vw,80px);} .hero{padding-top:clamp(44px,7vw,72px);padding-bottom:clamp(36px,5vw,56px);} .gallery{grid-template-columns:repeat(2,1fr);} .logos{grid-template-columns:repeat(3,1fr);} .case-nums{grid-template-columns:1fr 1fr;} .cal-slot{min-height:340px;padding:24px;} } /* large phones */ @media (max-width:640px){ body{font-size:16px;} .wrap{padding-left:18px;padding-right:18px; padding-left:calc(18px + env(safe-area-inset-left)); padding-right:calc(18px + env(safe-area-inset-right));} .hdr-in{height:66px;gap:12px;} .brand-sub{display:none;} .mark{width:34px;height:34px;font-size:.9rem;} .brand-name{font-size:.97rem;} .hdr .btn{display:none;} .nav{padding-left:18px;padding-right:18px;} h1{font-size:clamp(2.15rem,10vw,3.1rem);} h2{font-size:clamp(1.72rem,7.2vw,2.35rem);} h3{font-size:1.15rem;} .lede{font-size:1rem;} .hero h1{max-width:none;} .hero h1 .u{white-space:normal;} /* stop the underlined phrase forcing width */ .hero-cta{gap:10px;} .hero-cta .btn{width:100%;} .stats,.svc,.cases,.tiers,.tracks,.duo,.book,.steps{grid-template-columns:1fr;} .wall{columns:1;} .gallery{grid-template-columns:1fr;} .gal-item.wide{grid-column:span 1;} .logos{grid-template-columns:repeat(2,1fr);} .card,.tier,.case,.tw{padding:24px 20px;} .panel{padding:26px 22px;} .tier-hot{box-shadow:6px 8px 0 #12190A;} .promo-bar{padding:20px;} .pb-head{margin-right:0;} .mq span{padding-inline:16px;gap:16px;} .num{font-size:clamp(2.4rem,13vw,3.2rem);} details p,summary{padding-right:38px;} } /* small phones */ @media (max-width:400px){ .wrap{padding-left:15px;padding-right:15px;} h1{font-size:clamp(1.95rem,9.6vw,2.5rem);} .case-nums{grid-template-columns:1fr;} .logos{grid-template-columns:1fr 1fr;} .chips{gap:7px;} .chip{font-size:.68rem;padding:.4em .8em;} .sticker{font-size:.66rem;} .card,.tier,.case,.tw{padding:20px 17px;} } /* short landscape phones — keep the hero from filling the whole screen */ @media (max-height:520px) and (orientation:landscape){ .hero{padding-top:34px;padding-bottom:28px;} h1{font-size:clamp(1.9rem,5.4vw,2.8rem);} .hdr-in{height:58px;} } /* very wide screens */ @media (min-width:1600px){ :root{--wrap:1320px;} body{font-size:17px;} } /* ════════════════════════════════════════════════════════════════════ FLOATING WHATSAPP BUTTON ════════════════════════════════════════════════════════════════════ */ .wa-fab{ position:fixed;z-index:90; right:20px;bottom:20px; right:calc(20px + env(safe-area-inset-right)); bottom:calc(20px + env(safe-area-inset-bottom)); display:inline-flex;align-items:center;gap:0; background:var(--wa);color:var(--wa-on); /* rim in the brand's own dark teal, kept low-opacity so it reads as an edge rather than as a second colour */ border:2px solid rgba(7,94,84,.42); border-radius:100px;padding:14px; text-decoration:none;font-family:var(--f-body);font-weight:700; box-shadow:0 12px 30px rgba(0,0,0,.34),0 3px 10px rgba(0,0,0,.22); transition:transform .2s cubic-bezier(.3,1.4,.5,1),gap .28s ease,box-shadow .2s ease; /* entrance */ animation:wa-in .5s cubic-bezier(.2,1.3,.4,1) .8s both; } .wa-fab svg{width:30px;height:30px;flex:none;position:relative;z-index:2;} .wa-fab .wa-label{ max-width:0;overflow:hidden;white-space:nowrap;font-size:.95rem;letter-spacing:-.01em; transition:max-width .3s ease;position:relative;z-index:2; } .wa-fab:hover,.wa-fab:focus-visible{transform:translateY(-3px) scale(1.03); box-shadow:0 16px 38px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.26);} .wa-fab:hover .wa-label,.wa-fab:focus-visible .wa-label{max-width:230px;} .wa-fab:hover,.wa-fab:focus-visible{gap:11px;} .wa-fab:active{transform:translateY(-1px) scale(.99);} /* pulse ring — draws the eye without moving the button itself */ .wa-fab::before{ content:"";position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px; border-radius:50%;background:var(--wa);opacity:.55;z-index:1; animation:wa-pulse 2.6s ease-out infinite; } @keyframes wa-pulse{ 0%{transform:scale(.85);opacity:.5;} 70%{transform:scale(1.7);opacity:0;} 100%{transform:scale(1.7);opacity:0;} } @keyframes wa-in{from{opacity:0;transform:translateY(18px) scale(.8);}to{opacity:1;transform:none;}} @media (max-width:640px){ .wa-fab{right:16px;bottom:16px;padding:13px; right:calc(16px + env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom));} .wa-fab svg{width:27px;height:27px;} .wa-fab::before{width:54px;height:54px;margin:-27px 0 0 -27px;} } /* On touch there is no hover, so never reserve room for the label */ @media (hover:none){ .wa-fab:hover{transform:none;gap:0;} .wa-fab:hover .wa-label{max-width:0;} } @media (prefers-reduced-motion:reduce){ .wa-fab{animation:none;} .wa-fab::before{animation:none;opacity:0;} .wa-fab:hover,.wa-fab:focus-visible{transform:none;} } /* Inline WhatsApp marks. The logo is white-on-green, so a bare green glyph is off-brand — these render the real lockup: white glyph inside a green disc. */ .wa-inline{display:inline-flex;align-items:center;gap:.55em;} .wa-inline svg{ width:1.55em;height:1.55em;flex:none;box-sizing:border-box;padding:.26em; background:var(--wa);color:var(--wa-on);border-radius:50%; } .c-item .wa-mark{ width:34px;height:34px;flex:none;border-radius:50%; background:var(--wa);color:var(--wa-on); display:inline-flex;align-items:center;justify-content:center; } .c-item .wa-mark svg{width:20px;height:20px;} /* print */ @media print{ .wa-fab{display:none !important;} .hdr,.burger,.lang,.mq,.blobs,.cal-slot,.gal-tabs{display:none !important;} body{background:#fff;color:#000;} .sec{padding-block:22px;background:#fff !important;color:#000 !important;} .card,.tier,.case,.tw{break-inside:avoid;border-color:#000;} a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;} }