:root{
  --ink:#111216;--ink2:#1b1d21;--paper:#f3f3f4;--white:#fff;
  --red:#e51b30;--red2:#b80f21;--muted:#686d75;--line:rgba(17,18,22,.12);
  --max:1180px;--r:24px;--shadow:0 20px 60px rgba(10,12,16,.12)
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--paper);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(calc(100% - 40px),var(--max));margin:auto}
.nav{position:fixed;z-index:80;inset:0 0 auto;background:rgba(17,18,22,.91);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px)}
.navin{height:72px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:900;letter-spacing:-.03em}
.mark{width:37px;height:37px;border-radius:11px;background:var(--red);position:relative;box-shadow:0 0 22px rgba(229,27,48,.22)}
.mark:before{content:"OF";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.72rem;font-weight:950}
.brand b{color:#ff4a5d}
.links{display:flex;gap:27px;color:#c8cbd0;font-size:.88rem;font-weight:750}
.links a:hover{color:#fff}
.navcta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:13px;font-weight:850;transition:.25s}
.navcta{background:var(--red);color:#fff;padding:11px 16px}
.navcta:hover,.primary:hover{transform:translateY(-2px);background:#f01d34}
.hero{min-height:100svh;padding:116px 0 60px;display:flex;align-items:center;background:linear-gradient(180deg,#e8e9eb,#f3f3f4)}
.heroGrid{display:grid;grid-template-columns:1fr .95fr;gap:56px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;font-weight:900;color:var(--red)}
.kicker:before{content:"";width:26px;height:2px;background:var(--red)}
h1{font-size:clamp(3.3rem,7vw,6.6rem);line-height:.88;letter-spacing:-.075em;margin:18px 0 24px}
h1 span{color:var(--red)}
.lead{font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.72;color:#5e636b;max-width:650px}
.lead strong{color:var(--ink)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero .actions .btn{width:285px;min-height:60px;padding:15px 16px;text-align:center}
.btn{padding:15px 19px}
.primary{background:var(--red);color:#fff;box-shadow:0 12px 30px rgba(229,27,48,.2)}
.secondary{background:var(--ink);color:#fff;border:1px solid var(--ink);box-shadow:0 12px 30px rgba(17,18,22,.16)}
.secondary:hover{transform:translateY(-2px);background:#24262b}
.mlbtn{padding:15px 19px;width:auto;min-width:0;background:#ffe600;color:#2d3277;border:1px solid rgba(45,50,119,.12);box-shadow:0 12px 30px rgba(45,50,119,.12)}
.mlbtn:hover{transform:translateY(-2px);background:#fff159;box-shadow:0 16px 34px rgba(45,50,119,.18)}
.igbtn{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);color:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 30px rgba(193,53,132,.18)}
.igbtn:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 16px 34px rgba(193,53,132,.24)}
.heroPhoto{position:relative;height:590px;border-radius:32px;overflow:hidden;box-shadow:var(--shadow);background:#ccc}
.heroPhoto img{width:100%;height:100%;object-fit:cover}
.heroPhoto:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.28),transparent 40%)}
.badge{position:absolute;z-index:2;left:20px;bottom:20px;padding:14px 16px;border-radius:15px;background:rgba(17,18,22,.88);color:#fff;backdrop-filter:blur(12px);font-size:.82rem}
.badge strong{display:block;font-size:1rem;margin-bottom:3px}
.trust{background:var(--ink);color:#fff}
.trustGrid{display:grid;grid-template-columns:repeat(4,1fr)}
.trustItem{padding:24px 22px;border-right:1px solid rgba(255,255,255,.08)}
.trustItem:last-child{border:0}.trustItem b{display:block;margin-bottom:5px}.trustItem span{font-size:.8rem;color:#aeb2b8}
.section{padding:92px 0}
.head{max-width:760px;margin-bottom:38px}
h2{font-size:clamp(2.2rem,4.6vw,4.4rem);line-height:.98;letter-spacing:-.06em;margin:13px 0 17px}
.copy{color:var(--muted);line-height:1.75;max-width:680px}
.story{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.photoFrame{height:590px;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);background:#ddd}
.photoFrame img{width:100%;height:100%;object-fit:cover}
.checks{display:grid;gap:13px;margin:26px 0 30px}
.check{display:flex;gap:12px;align-items:flex-start;padding:15px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.5)}
.tick{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:rgba(229,27,48,.09);color:var(--red);font-weight:900;flex:none}
.check small{display:block;color:var(--muted);margin-top:3px;line-height:1.45}
.dark{background:var(--ink);color:#fff}
.dark .copy{color:#aeb2b8}
.categories{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cat{min-height:230px;padding:25px;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:#181a1f;transition:.25s}
.cat:hover{transform:translateY(-5px);border-color:rgba(229,27,48,.45)}
.catNum{font-size:.75rem;color:#ff5364;font-weight:900;margin-bottom:64px}
.cat h3{font-size:1.25rem;margin-bottom:8px}.cat p{font-size:.88rem;line-height:1.55;color:#aeb2b8}
.immersive{padding:0;background:var(--ink)}
.immersiveGrid{display:grid;grid-template-columns:1fr 1fr}
.immersivePhoto{height:680px;overflow:hidden;position:relative}
.immersivePhoto img{width:100%;height:100%;object-fit:cover}
.immersiveText{display:flex;align-items:center;padding:70px;color:#fff;background:linear-gradient(135deg,#17191d,#0f1013)}
.immersiveText .copy{color:#b6bac0}
.mosaic{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:310px 310px;gap:14px}
.tile{border-radius:24px;overflow:hidden;position:relative;background:#ddd}
.tile:first-child{grid-row:span 2}
.tile img{width:100%;height:100%;object-fit:cover;transition:.6s}
.tile:hover img{transform:scale(1.025)}
.label{position:absolute;left:15px;bottom:15px;background:rgba(255,255,255,.91);padding:9px 11px;border-radius:10px;font-size:.76rem;font-weight:850}
.ctaBox{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:42px;border-radius:28px;color:#fff;background:radial-gradient(circle at 90% 10%,rgba(229,27,48,.28),transparent 28%),linear-gradient(135deg,#202227,#101114)}
.ctaBox h2{margin:10px 0 12px;max-width:760px}.ctaBox p{color:#b8bbc1}
.ctaBox .actions .btn{width:250px;min-width:250px;max-width:250px;height:60px;min-height:60px;padding:15px 16px;text-align:center;flex:0 0 250px;white-space:nowrap}
footer{padding:36px 0 96px;background:#0d0e10;color:#9ea2a9}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px}
.social{display:flex;gap:10px}.social a{border:1px solid rgba(255,255,255,.12);padding:10px 12px;border-radius:10px;color:#eee;font-size:.82rem}
.footerAddress{font-size:.76rem;line-height:1.5;margin-top:8px;max-width:480px;color:#858a92}.footerAddress a{color:#b7bbc2;text-decoration:none}.footerAddress a:hover{color:#fff}

/* WhatsApp: familiar official glyph shape + soft attention pulse */
.wa{
 position:fixed;z-index:100;right:20px;bottom:20px;width:62px;height:62px;border-radius:50%;
 display:grid;place-items:center;background:#25D366;color:#fff;
 box-shadow:0 12px 35px rgba(37,211,102,.34);animation:waPulse 2.2s ease-in-out infinite
}
.wa:before{content:"";position:absolute;inset:-7px;border:2px solid rgba(37,211,102,.32);border-radius:50%;animation:ring 2.2s ease-out infinite}
.wa svg{width:34px;height:34px;fill:#fff;position:relative}
@keyframes waPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes ring{0%{transform:scale(.88);opacity:.75}70%,100%{transform:scale(1.35);opacity:0}}
.reveal{opacity:0;transform:translateY(20px);transition:.65s ease}
.reveal.show{opacity:1;transform:none}

@media(max-width:900px){
 .links{display:none}.hero{min-height:auto}.heroGrid,.story{grid-template-columns:1fr}
 .heroPhoto{height:520px}.trustGrid{grid-template-columns:1fr 1fr}
 .trustItem:nth-child(2){border-right:0}.trustItem:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}
 .categories{grid-template-columns:1fr 1fr}.immersiveGrid{grid-template-columns:1fr}
 .immersivePhoto{height:520px}.immersiveText{padding:55px 35px}
}
@media(max-width:600px){
 .container{width:min(calc(100% - 26px),var(--max))}
 .navin{height:65px}.brand{font-size:.88rem}.mark{width:33px;height:33px}.navcta{font-size:.75rem;padding:9px 11px}
 .hero{padding:96px 0 44px}.heroGrid{gap:34px}
 h1{font-size:clamp(3.15rem,15vw,5rem);margin-top:15px}.lead{font-size:.96rem}
 .actions{display:flex;flex-direction:column;align-items:flex-start}.hero .actions .btn{width:min(100%,285px);min-height:60px}
 .heroPhoto{height:430px;border-radius:23px}.badge{left:12px;right:12px;bottom:12px}
 .section{padding:68px 0}.head{margin-bottom:28px}
 .trustItem{padding:18px 14px}.trustItem b{font-size:.9rem}.trustItem span{font-size:.72rem}
 .story{gap:30px}.photoFrame{height:430px;border-radius:22px}
 .categories{grid-template-columns:1fr}.cat{min-height:190px}.catNum{margin-bottom:42px}
 .immersivePhoto{height:440px}.immersiveText{padding:55px 20px}
 .mosaic{grid-template-columns:1fr;grid-template-rows:none}.tile,.tile:first-child{height:340px;grid-row:auto}
 .ctaBox{padding:28px 22px;align-items:flex-start;flex-direction:column}
 .ctaBox .actions .btn{width:250px;min-width:250px;max-width:250px;height:60px;min-height:60px;flex:0 0 60px;white-space:nowrap}
 .foot{align-items:flex-start;flex-direction:column}.wa{right:14px;bottom:14px;width:58px;height:58px}
}
.section,.trust,.immersive,footer{content-visibility:auto;contain-intrinsic-size:1px 700px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* Menu mobile */
.mobileMenuBtn{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#1b1d21;color:#fff;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:102}
.mobileMenuBtn span,.mobileMenuBtn:before,.mobileMenuBtn:after{content:"";display:block;width:20px;height:2px;background:#fff;border-radius:2px;position:absolute;transition:.25s}
.mobileMenuBtn:before{transform:translateY(-6px)}.mobileMenuBtn:after{transform:translateY(6px)}
.mobileMenuBtn.open span{opacity:0}.mobileMenuBtn.open:before{transform:rotate(45deg)}.mobileMenuBtn.open:after{transform:rotate(-45deg)}
.mobileMenu{display:none}
@media(max-width:900px){.navcta{display:none}.mobileMenuBtn{display:inline-flex}.mobileMenu{display:flex;position:fixed;z-index:79;top:65px;left:0;right:0;padding:12px 13px 18px;background:rgba(17,18,22,.98);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px);flex-direction:column;gap:7px;transform:translateY(-130%);opacity:0;visibility:hidden;transition:.28s ease}.mobileMenu.open{transform:translateY(0);opacity:1;visibility:visible}.mobileMenu a{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:12px;color:#fff;font-weight:800;border:1px solid rgba(255,255,255,.08);background:#181a1f}.mobileMenu .mobileWa{background:#25D366;border-color:#25D366;color:#fff}.mobileMenu .mobileMl{background:#ffe600;border-color:#ffe600;color:#171717}}
@media(max-width:600px){.foot{align-items:flex-start;flex-direction:column}.footerAddress{font-size:.73rem}}



.wa{overflow:visible}
.wa svg{display:block;width:35px;height:35px;fill:#fff;transform:none!important}