/*
Theme Name: Tubros Technologies
Theme URI: https://tubrostechnologies.com
Author: Tubros Technologies
Description: AI-powered digital marketing agency theme — animated, fast, and SEO/AEO/GEO-ready. Includes a Home page and a Job Oriented Digital Marketing Course With AI page.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: tubros
*/

:root{
  --navy:#0E1A2B; --navy-2:#0A1422; --blue:#2456E6; --teal:#19C3B2;
  --light:#F5F7FA; --ink:#353A40; --white:#fff; --muted:#6B7686;
  --grad:linear-gradient(120deg,#2456E6 0%,#19C3B2 100%);
  --grad-soft:linear-gradient(120deg,rgba(36,86,230,.12),rgba(25,195,178,.12));
  --shadow:0 18px 50px -20px rgba(14,26,43,.35); --r:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--white);line-height:1.6;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Sora',sans-serif;color:var(--navy);line-height:1.1;letter-spacing:-.02em}
a{text-decoration:none;color:inherit}
.wrap{width:min(1180px,92vw);margin:0 auto}
.eyebrow{font-family:'Sora';font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:.5rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--grad)}
section{padding:6.5rem 0}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:'Sora';font-weight:600;font-size:.95rem;padding:.95rem 1.6rem;border-radius:12px;cursor:pointer;border:0;transition:transform .25s,box-shadow .25s}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 30px -12px rgba(36,86,230,.7)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 38px -12px rgba(36,86,230,.8)}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid rgba(14,26,43,.15)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-3px)}
.btn-light{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.25)}
.btn-light:hover{background:rgba(255,255,255,.18);transform:translateY(-3px)}
.sec-head{max-width:42rem;margin-bottom:3rem}
.sec-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:1rem 0 .8rem}
.sec-head p{color:var(--muted);font-size:1.05rem}
.sec-head.center{margin-inline:auto;text-align:center}

/* HEADER */
header#header{position:fixed;top:0;left:0;right:0;z-index:100;transition:.3s}
header#header .bar{display:flex;align-items:center;justify-content:space-between;padding:1.3rem 0;transition:.3s}
header#header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);box-shadow:0 6px 30px -18px rgba(14,26,43,.4)}
header#header.scrolled .bar{padding:.8rem 0}
.logo{font-family:'Sora';font-weight:800;font-size:1.4rem;color:#fff;letter-spacing:-.03em;transition:.3s}
.logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
header#header.scrolled .logo{color:var(--navy)}
nav ul{display:flex;gap:2rem;list-style:none;align-items:center}
nav a{font-size:.92rem;font-weight:500;color:rgba(255,255,255,.85);transition:.2s}
header#header.scrolled nav a{color:var(--ink)}
nav a:hover{color:var(--teal)}
.nav-cta{display:flex;align-items:center;gap:1.2rem}
.nav-phone{font-family:'Sora';font-weight:600;font-size:.92rem;color:#fff}
header#header.scrolled .nav-phone{color:var(--navy)}
.menu-btn{display:none;background:none;border:0;cursor:pointer}
.menu-btn span{display:block;width:26px;height:2px;background:#fff;margin:5px 0;transition:.3s}
header#header.scrolled .menu-btn span{background:var(--navy)}

/* HERO */
.hero{position:relative;background:var(--navy);color:#fff;padding:11rem 0 6.5rem;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:float 14s ease-in-out infinite}
.hero::before{width:520px;height:520px;background:radial-gradient(circle,#2456E6,transparent 70%);top:-160px;right:-120px}
.hero::after{width:460px;height:460px;background:radial-gradient(circle,#19C3B2,transparent 70%);bottom:-180px;left:-140px;animation-delay:-7s}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-30px)}}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center}
.hero-inner{position:relative;z-index:2;max-width:48rem}
.hero .eyebrow{color:var(--teal)}
.hero .eyebrow::before{background:var(--teal)}
.hero h1{color:#fff;font-size:clamp(2.4rem,5vw,3.9rem);font-weight:800;margin:1.4rem 0}
.hero-grid h1{min-height:2.2em}
.hero h1 .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.sub{font-size:1.12rem;color:rgba(255,255,255,.8);max-width:34rem;margin-bottom:2.2rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero-trust,.hero-meta{margin-top:2.8rem;display:flex;gap:2rem;flex-wrap:wrap;font-size:.85rem;color:rgba(255,255,255,.6)}
.hero-trust b,.hero-meta b{color:#fff;font-family:'Sora'}

/* HERO CARD */
.signal-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:1.8rem;backdrop-filter:blur(10px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.signal-card .sc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.4rem}
.sc-head .dot{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 5px rgba(25,195,178,.2);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 5px rgba(25,195,178,.2)}50%{box-shadow:0 0 0 9px rgba(25,195,178,0)}}
.sc-label{font-size:.78rem;color:rgba(255,255,255,.6)}
.sc-big{font-family:'Sora';font-weight:800;font-size:2.6rem;color:#fff;line-height:1}
.sc-big span{font-size:1.4rem;color:var(--teal)}
.sc-sub{font-size:.82rem;color:rgba(255,255,255,.55);margin-top:.2rem;margin-bottom:1.4rem}
.bars{display:flex;align-items:flex-end;gap:.55rem;height:90px}
.bars div{flex:1;background:var(--grad);border-radius:6px 6px 0 0;opacity:.9;transition:height 1s cubic-bezier(.2,.8,.2,1)}

/* STRIP */
.strip{background:var(--light);padding:2.4rem 0}
.strip .wrap{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;text-align:center}
.stat .num{font-family:'Sora';font-weight:800;font-size:2.4rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .lbl{font-size:.85rem;color:var(--muted);margin-top:.2rem}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-card{background:var(--navy);color:#fff;border-radius:var(--r);padding:2.4rem;position:relative;overflow:hidden}
.about-card::after{content:"";position:absolute;width:280px;height:280px;background:radial-gradient(circle,rgba(25,195,178,.4),transparent 70%);bottom:-120px;right:-80px;filter:blur(40px)}
.about-card h3{color:#fff;margin-bottom:.6rem;position:relative}
.about-card p{color:rgba(255,255,255,.75);font-size:.95rem;position:relative}
.about-card .row{display:flex;gap:1.4rem;margin-top:1.6rem;position:relative}
.about-card .row > div{flex:1}

/* SERVICES */
.services{background:var(--light)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.svc{background:#fff;border-radius:var(--r);padding:2rem 1.6rem;border:1px solid #eef0f4;transition:.3s}
.svc:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
.svc .ic{width:52px;height:52px;border-radius:14px;background:var(--grad-soft);display:grid;place-items:center;margin-bottom:1.2rem;font-size:1.5rem}
.svc h3{font-size:1.18rem;margin-bottom:.5rem}
.svc p{font-size:.9rem;color:var(--muted)}
.svc a{display:inline-block;margin-top:1rem;font-family:'Sora';font-weight:600;font-size:.85rem;color:var(--blue)}

/* COURSE BANNER */
.course-cta{background:var(--navy);border-radius:26px;padding:3.4rem;color:#fff;position:relative;overflow:hidden;display:grid;grid-template-columns:1.4fr .6fr;gap:2rem;align-items:center}
.course-cta::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:.14}
.course-cta > *{position:relative}
.course-cta .eyebrow{color:var(--teal)} .course-cta .eyebrow::before{background:var(--teal)}
.course-cta h2{color:#fff;font-size:clamp(1.8rem,3vw,2.4rem);margin:1rem 0}
.course-cta p{color:rgba(255,255,255,.8);max-width:36rem}
.course-prices{display:flex;gap:1rem;margin-top:1.6rem;flex-wrap:wrap}
.price-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:.8rem 1.2rem}
.price-pill b{font-family:'Sora';font-size:1.3rem;color:#fff;display:block}
.price-pill span{font-size:.78rem;color:rgba(255,255,255,.6)}

/* WHY */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.why{padding:2rem;border-radius:var(--r);background:#fff;border:1px solid #eef0f4}
.why .n{font-family:'Sora';font-weight:800;font-size:1rem;color:var(--teal);margin-bottom:.8rem}
.why h3{font-size:1.15rem;margin-bottom:.5rem}
.why p{font-size:.92rem;color:var(--muted)}

/* PROCESS */
.process{background:var(--navy);color:#fff}
.process .sec-head h2{color:#fff} .process .sec-head p{color:rgba(255,255,255,.7)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;counter-reset:s}
.step{padding:2rem;border-radius:var(--r);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);position:relative}
.step::before{counter-increment:s;content:"0" counter(s);font-family:'Sora';font-weight:800;font-size:2.4rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block;margin-bottom:.6rem}
.step h3{color:#fff;font-size:1.15rem;margin-bottom:.4rem}
.step p{color:rgba(255,255,255,.7);font-size:.92rem}

/* FEAT (course) */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.feat{background:#fff;border:1px solid #eef0f4;border-radius:var(--r);padding:1.8rem 1.5rem;transition:.3s}
.feat:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.feat .ic{width:48px;height:48px;border-radius:13px;background:var(--grad-soft);display:grid;place-items:center;font-size:1.4rem;margin-bottom:1rem}
.feat h3{font-size:1.08rem;margin-bottom:.4rem}
.feat p{font-size:.88rem;color:var(--muted)}

/* PRICING */
.pricing{background:var(--light)}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;max-width:880px;margin:0 auto}
.pcard{background:#fff;border-radius:22px;padding:2.4rem;border:1px solid #eef0f4;position:relative;transition:.3s}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.pcard.featured{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box}
.pcard .tag{position:absolute;top:-13px;left:2.4rem;background:var(--grad);color:#fff;font-family:'Sora';font-weight:600;font-size:.72rem;padding:.35rem .9rem;border-radius:50px}
.pcard h3{font-size:1.3rem}
.pcard .price{font-family:'Sora';font-weight:800;font-size:2.6rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:.6rem 0 .2rem}
.pcard .dur{font-size:.9rem;color:var(--muted);margin-bottom:1.4rem}
.pcard ul{list-style:none;margin-bottom:1.6rem}
.pcard li{font-size:.92rem;padding:.5rem 0;padding-left:1.7rem;position:relative;border-bottom:1px solid #f1f3f7}
.pcard li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:700}
.pcard .btn-primary{width:100%;justify-content:center}

/* CURRICULUM */
.curr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.curr{background:#fff;border:1px solid #eef0f4;border-radius:var(--r);padding:1.8rem}
.curr .k{font-family:'Sora';font-weight:700;font-size:.8rem;color:var(--blue);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.9rem}
.curr ul{list-style:none}
.curr li{font-size:.9rem;color:var(--ink);padding:.35rem 0;padding-left:1.3rem;position:relative}
.curr li::before{content:"–";position:absolute;left:0;color:var(--teal)}

/* TOOLS */
.tools{background:var(--navy);color:#fff}
.tools .sec-head h2{color:#fff} .tools .sec-head p{color:rgba(255,255,255,.7)}
.tool-row{display:flex;flex-wrap:wrap;gap:.8rem}
.chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:50px;padding:.6rem 1.2rem;font-family:'Sora';font-weight:500;font-size:.88rem;color:#fff}

/* TWO COL */
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.panel{background:#fff;border:1px solid #eef0f4;border-radius:var(--r);padding:2.2rem}
.panel h3{font-size:1.25rem;margin-bottom:1rem}
.panel ul{list-style:none}
.panel li{font-size:.92rem;padding:.45rem 0;padding-left:1.6rem;position:relative;color:var(--ink)}
.panel li::before{content:"→";position:absolute;left:0;color:var(--blue);font-weight:700}

/* REVIEWS */
.reviews{background:var(--light)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.rev{background:#fff;border-radius:var(--r);padding:1.8rem;border:1px solid #eef0f4;display:flex;flex-direction:column;gap:1rem}
.stars{color:#FBB034;letter-spacing:2px;font-size:.95rem}
.rev p{font-size:.92rem;color:var(--ink)}
.rev .who{display:flex;align-items:center;gap:.8rem;margin-top:auto}
.rev .av{width:40px;height:40px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-family:'Sora';font-weight:700}
.rev .who b{font-family:'Sora';font-size:.92rem;display:block;color:var(--navy)}
.rev .who span{font-size:.74rem;color:var(--muted)}
.g-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;color:var(--muted);font-weight:600}

/* FAQ */
.faq-list{max-width:780px;margin:0 auto}
.faq{background:#fff;border:1px solid #eef0f4;border-radius:14px;margin-bottom:.9rem;overflow:hidden}
.faq button{width:100%;text-align:left;background:none;border:0;padding:1.3rem 1.5rem;font-family:'Sora';font-weight:600;font-size:1rem;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq .a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--muted);font-size:.94rem}
.faq .a p{padding:0 1.5rem 1.3rem}
.faq.open .a{max-height:260px}
.faq button .pl{color:var(--teal);transition:transform .3s;font-size:1.3rem;line-height:1}
.faq.open button .pl{transform:rotate(45deg)}

/* ENROLL */
.enroll{background:var(--navy);color:#fff;text-align:center;border-radius:26px;padding:3.6rem;position:relative;overflow:hidden}
.enroll::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:.14}
.enroll>*{position:relative}
.enroll h2{color:#fff;font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:.8rem}
.enroll p{color:rgba(255,255,255,.8);max-width:34rem;margin:0 auto 1.8rem}
.enroll .row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* CONTACT */
.contact{background:var(--navy);color:#fff}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.contact .sec-head h2{color:#fff} .contact .sec-head p{color:rgba(255,255,255,.7)}
.c-item{display:flex;gap:1rem;margin-bottom:1.4rem;align-items:flex-start}
.c-item .ic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;flex-shrink:0;font-size:1.1rem}
.c-item b{font-family:'Sora';display:block;font-size:.78rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.08em}
.c-item span{color:#fff}
.form{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:2rem}
.form label{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.7);display:block;margin-bottom:.4rem}
.form input,.form select,.form textarea{width:100%;padding:.85rem 1rem;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:.92rem;margin-bottom:1.1rem}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.4)}
.form .btn-primary{width:100%;justify-content:center}

/* FOOTER */
footer.site-footer{background:var(--navy-2);color:rgba(255,255,255,.7);padding:4.5rem 0 0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.4rem}
.foot-grid h4{color:#fff;font-size:.95rem;margin-bottom:1.2rem}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:.6rem;font-size:.9rem}
.foot-grid a:hover{color:var(--teal)}
.foot-brand .logo{color:#fff;display:inline-block;margin-bottom:1rem}
.foot-brand p{font-size:.9rem;max-width:24rem;margin-bottom:1.2rem}
.iso{display:inline-flex;align-items:center;gap:.6rem;background:var(--grad-soft);border:1px solid rgba(25,195,178,.3);border-radius:12px;padding:.6rem 1rem;font-family:'Sora';font-weight:600;font-size:.82rem;color:#fff}
.iso .ring{width:26px;height:26px;border-radius:50%;border:2px solid var(--teal);display:grid;place-items:center;font-size:.6rem;color:var(--teal)}
.socials{display:flex;gap:.7rem;margin-top:1.2rem}
.socials a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center;transition:.2s}
.socials a:hover{background:var(--grad);transform:translateY(-3px)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:3.5rem;padding:1.6rem 0;font-size:.82rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

/* VOICE TOGGLE */
.voice-toggle{position:fixed;bottom:1.6rem;right:1.6rem;z-index:200;display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid #e7e9ef;box-shadow:var(--shadow);border-radius:50px;padding:.6rem .9rem .6rem .7rem;cursor:pointer;font-family:'Sora';font-weight:600;font-size:.82rem;color:var(--navy);transition:.25s}
.voice-toggle:hover{transform:translateY(-2px)}
.voice-toggle .vic{width:34px;height:34px;border-radius:50%;background:var(--light);display:grid;place-items:center;font-size:1rem;transition:.25s}
.voice-toggle.on{background:var(--navy);color:#fff;border-color:transparent}
.voice-toggle.on .vic{background:var(--grad);color:#fff}

/* REVEAL */
.reveal{opacity:0;transform:translateY(40px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.hero::before,.hero::after{animation:none}}

/* RESPONSIVE */
@media(max-width:900px){
  section{padding:4rem 0}
  nav,.nav-phone{display:none}
  .menu-btn{display:block}
  .hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .svc-grid,.why-grid,.steps,.rev-grid,.feat-grid,.curr-grid{grid-template-columns:1fr}
  .price-grid,.two{grid-template-columns:1fr}
  .course-cta{grid-template-columns:1fr;padding:2.2rem}
  .enroll{padding:2.4rem}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero{padding:8rem 0 4rem}
}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- ADDED: logo images ---------- */
.logo-link{display:inline-flex;align-items:center}
.logo-img{height:40px;width:auto;display:block}
.logo-dark{display:none}
header#header.scrolled .logo-light{display:none}
header#header.scrolled .logo-dark{display:block}

/* ---------- ADDED: dropdown menu ---------- */
nav li.has-drop{position:relative}
nav .drop{position:absolute;top:130%;left:0;background:#fff;border:1px solid #eef0f4;border-radius:14px;box-shadow:var(--shadow);padding:.6rem;min-width:230px;display:flex;flex-direction:column;gap:.1rem;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s;list-style:none}
nav li.has-drop:hover .drop{opacity:1;visibility:visible;transform:translateY(0)}
nav .drop li{margin:0}
nav .drop a{display:block;padding:.6rem .8rem;border-radius:9px;color:var(--ink);font-size:.9rem}
nav .drop a:hover{background:var(--light);color:var(--blue)}

/* ---------- ADDED: mobile nav ---------- */
@media(max-width:900px){
  nav{position:fixed;inset:0 0 0 auto;width:min(320px,82vw);background:#fff;flex-direction:column;padding:6rem 1.6rem 2rem;box-shadow:var(--shadow);transform:translateX(100%);transition:transform .3s;display:block;z-index:90}
  nav.open{transform:translateX(0)}
  nav ul{flex-direction:column;align-items:flex-start;gap:.4rem}
  nav a{color:var(--ink) !important;font-size:1rem;padding:.5rem 0;display:block}
  nav .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:.2rem 0 .2rem 1rem;min-width:0}
  .menu-btn{display:block;z-index:95}
}

/* ---------- ADDED: service / content pages ---------- */
.page-hero{position:relative;background:var(--navy);color:#fff;padding:10rem 0 4.5rem;overflow:hidden}
.page-hero::after{content:"";position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,#19C3B2,transparent 70%);filter:blur(90px);opacity:.4;bottom:-200px;right:-120px}
.page-hero .inner{position:relative;z-index:2;max-width:46rem}
.page-hero .eyebrow{color:var(--teal)} .page-hero .eyebrow::before{background:var(--teal)}
.page-hero h1{color:#fff;font-size:clamp(2.1rem,4.5vw,3.2rem);margin:1.1rem 0}
.page-hero p{color:rgba(255,255,255,.8);font-size:1.1rem}
.prose{max-width:48rem}
.prose p{color:var(--ink);margin-bottom:1.1rem;font-size:1.02rem}
.prose h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:2.2rem 0 1rem}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1rem}
.feature-list .it{background:#fff;border:1px solid #eef0f4;border-radius:14px;padding:1.4rem}
.feature-list .it h3{font-size:1.05rem;margin-bottom:.35rem}
.feature-list .it p{font-size:.9rem;color:var(--muted)}
.feature-list .it b{color:var(--blue)}
@media(max-width:760px){.feature-list{grid-template-columns:1fr}}

/* ---------- ADDED: form notice ---------- */
.form-note{padding:1rem 1.2rem;border-radius:12px;margin-bottom:1.2rem;font-size:.92rem;font-weight:500}
.form-note.ok{background:rgba(25,195,178,.15);border:1px solid rgba(25,195,178,.4);color:#0c6b62}
.form-note.err{background:rgba(230,60,60,.12);border:1px solid rgba(230,60,60,.35);color:#a32020}

/* ---------- ADDED: blog pagination & post links ---------- */
.pagination .nav-links{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 .6rem;border-radius:10px;background:#fff;border:1px solid #eef0f4;font-family:'Sora';font-weight:600;font-size:.9rem;color:var(--navy)}
.pagination .page-numbers.current{background:var(--grad);color:#fff;border-color:transparent}
.pagination .page-numbers:hover{border-color:var(--blue);color:var(--blue)}
.rev h3 a{color:var(--navy)} .rev h3 a:hover{color:var(--blue)}
.prose a{color:var(--blue);text-decoration:underline}
.prose ul,.prose ol{margin:0 0 1.1rem 1.4rem} .prose li{margin-bottom:.4rem}

/* ---------- FIX: dropdown option readability (dark text on white) ---------- */
.form select option{color:#0E1A2B !important;background:#ffffff !important}
.form select{color:#fff}
.form select:focus{outline:2px solid var(--teal);outline-offset:2px}