/* ================================================
   eInvoice.Global – Complete Stylesheet
   Accurate replica of e-invoice.app
   ================================================ */
:root {
  --dark: #0F172A;
  --dark-2: #1E293B;
  --dark-3: #334155;
  --mid: #475569;
  --muted: #64748B;
  --muted-2: #94A3B8;
  --border: #E2E8F0;
  --border-dark: #334155;
  --bg: #FFFFFF;
  --bg-2: #F8FAFC;
  --bg-3: #F1F5F9;
  --green: #22C55E;
  --green-dark: #16A34A;
  --green-bg: #F0FDF4;
  --green-border: #BBF7D0;
  --red: #EF4444;
  --red-bg: #FEF2F2;
  --amber: #F59E0B;
  --amber-bg: #FFFBEB;
  --blue: #3B82F6;
  --blue-bg: #EFF6FF;
  --accent: #22C55E;
  --font: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 4px 16px rgba(0,0,0,.07);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.12);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font);background:var(--bg);color:var(--dark);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
img,svg{display:block;max-width:100%}
details summary::-webkit-details-marker{display:none}
details summary{cursor:pointer}

.skip-link{position:absolute;top:-100%;left:1rem;background:var(--dark);color:#fff;padding:.5rem 1rem;border-radius:var(--radius);z-index:9999;font-weight:600}
.skip-link:focus{top:1rem}
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;border-radius:100px;font-size:.9rem;font-weight:600;transition:all .2s;white-space:nowrap;line-height:1.4}
.btn-primary{background:var(--dark);color:#fff}
.btn-primary:hover{background:var(--dark-2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.25)}
.btn-outline{border:1.5px solid var(--border);color:var(--dark);background:#fff}
.btn-outline:hover{border-color:var(--dark);transform:translateY(-1px)}
.btn-ghost-sm{font-size:.85rem;font-weight:500;color:var(--muted);padding:.4rem .75rem;border-radius:8px;transition:background .15s}
.btn-ghost-sm:hover{background:var(--bg-3);color:var(--dark)}
.btn-lg{padding:.8rem 1.75rem;font-size:1rem}
.btn-white{background:#fff;color:var(--dark);font-weight:700}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.btn-outline-white{border:1.5px solid rgba(255,255,255,.4);color:#fff}
.btn-outline-white:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.news-badge{background:var(--green);color:#fff;padding:.1rem .45rem;border-radius:100px;font-size:.7rem;font-weight:700}

/* ANNOUNCEMENT BAR */
.announcement-bar{
  background:var(--dark);color:rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  padding:.55rem 1.5rem;font-size:.8rem;font-weight:500;
  flex-wrap:wrap;
}
.announce-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;animation:pulse-dot 1.5s infinite}
.announce-link{color:var(--green);font-weight:600;margin-left:.25rem}
.announce-link:hover{text-decoration:underline}

/* HEADER */
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:1.5rem;height:64px}
.logo{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.logo-mark{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--dark);color:var(--green);border-radius:8px;font-family:var(--mono);font-weight:700;font-size:.9rem}
.logo-text{font-size:1.1rem;font-weight:700;letter-spacing:-.5px;color:var(--dark)}
.logo-suffix{color:var(--muted)}
.logo-text.white{color:#fff}
.nav-links{display:flex;margin-left:auto;gap:.25rem}
.nav-link,.nav-btn{padding:.45rem .8rem;font-size:.875rem;font-weight:500;color:var(--muted);border-radius:8px;transition:all .15s;display:flex;align-items:center;gap:.3rem}
.nav-link:hover,.nav-btn:hover{color:var(--dark);background:var(--bg-2)}
.nav-chevron{font-size:.7rem}
.nav-dropdown{position:relative}
.dropdown-menu{
  display:none;position:absolute;top:calc(100% + 8px);left:0;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);min-width:280px;padding:.5rem;z-index:200;
}
.nav-dropdown:hover .dropdown-menu{display:block}
.dropdown-item{display:flex;align-items:center;gap:.85rem;padding:.75rem;border-radius:var(--radius);transition:background .15s}
.dropdown-item:hover{background:var(--bg-2)}
.di-icon{font-size:1.25rem;flex-shrink:0}
.di-title{font-weight:600;font-size:.875rem;color:var(--dark)}
.di-sub{font-size:.78rem;color:var(--muted)}
.nav-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}

/* NAV USER PILL (shown when logged in) */
.nav-user{display:flex;align-items:center;gap:.45rem;background:var(--bg-2);border:1px solid var(--border);border-radius:100px;padding:.3rem .75rem .3rem .35rem;font-size:.85rem;font-weight:500;color:var(--dark)}
.nav-user-avatar{border-radius:50%;object-fit:cover;flex-shrink:0;border:1.5px solid var(--border)}
.nav-user-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-user-badge{display:flex;align-items:center;flex-shrink:0}
.nav-logout-btn{font-size:.78rem;color:var(--muted);padding:.2rem .55rem;border-radius:100px;transition:background .15s,color .15s;margin-left:.1rem}
.nav-logout-btn:hover{background:var(--bg-3);color:var(--dark)}
.hamburger{display:none;flex-direction:column;gap:5px;padding:.5rem;margin-left:auto}
.hamburger span{display:block;width:22px;height:2px;background:var(--dark);border-radius:2px;transition:all .3s}

/* MOBILE NAV */
.mobile-nav{display:none;position:fixed;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:1rem 1.5rem 1.5rem;z-index:99;transform:translateY(-110%);transition:transform .3s ease}
.mobile-nav.open{transform:translateY(0)}
.mobile-nav ul{display:flex;flex-direction:column;gap:.25rem}
.mobile-nav a{display:block;padding:.6rem .75rem;font-weight:500;color:var(--mid);border-radius:8px}
.mobile-nav a:hover{color:var(--dark);background:var(--bg-2)}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:98}
.mobile-overlay.open{display:block}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes scroll-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scroll-companies{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
@keyframes type-cycle{0%,18%{opacity:1;transform:translateY(0)}20%,38%{opacity:0;transform:translateY(-10px)}40%{opacity:0;transform:translateY(10px)}42%,58%{opacity:1;transform:translateY(0)}}
.animate-in{animation:fadeUp .65s ease forwards;opacity:0}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.45s}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* HERO */
.hero{position:relative;overflow:hidden;padding:4.5rem 0 0;min-height:80vh;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.globe-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(15,23,42,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.03) 1px,transparent 1px);background-size:40px 40px}
.hero-radial{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 70% 50%,rgba(34,197,94,.06),transparent)}
.hero-inner{position:relative;z-index:1;padding:2rem 0 5rem;max-width:700px}
.hero-tag{display:inline-flex;align-items:center;gap:.6rem;background:var(--green-bg);color:var(--green-dark);border:1px solid var(--green-border);padding:.35rem .9rem;border-radius:100px;font-size:.8rem;font-weight:600;margin-bottom:1.5rem}
.tag-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse-dot 1.5s infinite}
.hero-title{font-size:clamp(2.2rem,4.5vw,3.5rem);font-weight:800;line-height:1.12;letter-spacing:-2px;margin-bottom:1.25rem;color:var(--dark)}
.typed-wrap{display:block;color:var(--dark)}
.typed-words{position:relative;display:inline-block;color:var(--green)}
.typed-word{display:none}
.typed-word.active{display:inline}
.hero-sub{font-size:1.1rem;color:var(--muted);max-width:560px;margin-bottom:2rem;line-height:1.7}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:2.5rem}

/* TICKER */
.updates-ticker{display:flex;align-items:center;gap:1rem;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.75rem 1.25rem;overflow:hidden;max-width:100%}
.ticker-label{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mid);flex-shrink:0;white-space:nowrap}
.ticker-live{background:var(--red);color:#fff;padding:.1rem .4rem;border-radius:4px;font-size:.65rem;letter-spacing:.05em}
.ticker-track{overflow:hidden;flex:1}
.ticker-slide{display:flex;gap:2rem;animation:scroll-ticker 35s linear infinite;width:max-content}
.ticker-item{display:flex;align-items:center;gap:.4rem;font-size:.82rem;white-space:nowrap;color:var(--mid)}
.flag{font-size:1rem}
.ticker-item strong{color:var(--dark)}

/* SECTION HELPERS */
.section{padding:5rem 0}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}
.section-label{display:inline-block;background:var(--green-bg);color:var(--green-dark);border:1px solid var(--green-border);padding:.28rem .8rem;border-radius:100px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.75rem}
.section-title{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-1.5px;margin-bottom:.6rem;line-height:1.18}
.section-sub{font-size:1rem;color:var(--muted);max-width:580px;line-height:1.7}

/* FILTER BAR */
.filter-bar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem;padding:.75rem;background:var(--bg-2);border-radius:var(--radius-lg);border:1px solid var(--border)}
.search-box{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:.45rem .85rem;flex:1;min-width:180px}
.search-box svg{color:var(--muted-2);flex-shrink:0}
.search-box input{border:none;outline:none;font-size:.875rem;font-family:var(--font);color:var(--dark);width:100%;background:transparent}
.search-box input::placeholder{color:var(--muted-2)}
.filter-pills{display:flex;gap:.35rem;flex-wrap:wrap}
.pill{padding:.35rem .8rem;border-radius:100px;font-size:.78rem;font-weight:500;border:1px solid var(--border);color:var(--muted);background:#fff;transition:all .15s}
.pill:hover{border-color:var(--dark);color:var(--dark)}
.pill.active{background:var(--dark);color:#fff;border-color:var(--dark)}

/* COUNTRY TABLE */
.table-wrapper{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.country-table{width:100%;border-collapse:collapse;font-size:.875rem}
.country-table thead{background:var(--bg-2)}
.country-table th{padding:.85rem 1rem;text-align:left;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap}
.country-table th.sortable{cursor:pointer}
.country-table th.sortable:hover{color:var(--dark)}
.sort-icon{color:var(--muted-2)}
.country-table td{padding:.85rem 1rem;border-bottom:1px solid var(--border);color:var(--dark);vertical-align:middle}
.country-table tbody tr:last-child td{border-bottom:none}
.country-table tbody tr:hover{background:var(--bg-2);box-shadow:inset 3px 0 0 var(--accent)}
.country-cell{display:flex;align-items:center;gap:.6rem;font-weight:600}
.country-flag{font-size:1.2rem}
.country-name-wrap{display:flex;flex-direction:column}
.country-code{font-size:.7rem;color:var(--muted);font-family:var(--mono)}
.badge-mandatory,.badge-phased,.badge-voluntary,.badge-none,.badge-planned{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:100px;font-size:.72rem;font-weight:700;white-space:nowrap}
.badge-mandatory{background:#DCFCE7;color:#16A34A}
.badge-phased{background:#FEF3C7;color:#B45309}
.badge-voluntary{background:#DBEAFE;color:#1D4ED8}
.badge-none{background:var(--bg-3);color:var(--muted)}
.badge-planned{background:#F3E8FF;color:#7C3AED}
.badge-mandatory.sm,.badge-phased.sm,.badge-voluntary.sm,.badge-none.sm{font-size:.68rem;padding:.15rem .5rem}
.mono{font-family:var(--mono);font-size:.8rem;color:var(--mid)}
.mono.sm{font-size:.72rem}
.trust-score{display:flex;align-items:center;gap:.3rem;font-family:var(--mono);font-size:.82rem;font-weight:600}
.ts-high{color:var(--green-dark)}
.ts-mid{color:var(--amber)}
.ts-low{color:var(--red)}
.table-footer{display:flex;justify-content:space-between;align-items:center;margin-top:1.25rem;flex-wrap:wrap;gap:1rem}
.table-count{font-size:.85rem;color:var(--muted)}

/* VS SECTION */
.vs-section{background:var(--bg-2)}
.vs-section .section-sub{margin-bottom:3rem}
.vs-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:start}
.vs-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);padding:2rem}
.vs-old{border-color:#FECACA}
.vs-new{border-color:var(--green-border)}
.vs-badge{display:inline-block;padding:.28rem .85rem;border-radius:100px;font-size:.75rem;font-weight:700;margin-bottom:1.25rem}
.vs-badge.bad{background:var(--red-bg);color:var(--red)}
.vs-badge.good{background:var(--green-bg);color:var(--green-dark)}
.vs-list{display:flex;flex-direction:column;gap:.9rem}
.vs-list li{display:flex;align-items:flex-start;gap:.75rem;font-size:.9rem;color:var(--mid);line-height:1.5}
.vs-list svg{flex-shrink:0;margin-top:.1rem}
.vs-divider{display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:800;color:var(--muted-2);padding:0 .5rem;align-self:center}
@media(max-width:700px){.vs-grid{grid-template-columns:1fr}.vs-divider{display:none}}

/* PERSONAS */
.personas{background:var(--bg)}
.personas .section-sub{margin-bottom:3rem}
.personas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.persona-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;transition:transform .3s,box-shadow .3s,border-color .3s}
.persona-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green-border)}
.persona-dept{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.4rem}
.persona-role{font-size:1rem;font-weight:700;color:var(--dark);margin-bottom:.9rem}
.persona-list{display:flex;flex-direction:column;gap:.4rem}
.persona-list li{font-size:.85rem;color:var(--muted);padding-left:.85rem;position:relative}
.persona-list li::before{content:'→';position:absolute;left:0;color:var(--green)}
@media(max-width:900px){.personas-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.personas-grid{grid-template-columns:1fr}}

/* PLATFORM TABS */
.platform{background:var(--bg-2)}
.platform .section-sub{margin-bottom:2rem}
.platform-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:.5rem}
.ptab{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-radius:var(--radius);font-size:.875rem;font-weight:500;color:var(--muted);transition:all .2s;flex:1;justify-content:center}
.ptab:hover{color:var(--dark);background:var(--bg-2)}
.ptab.active{background:var(--dark);color:#fff}
.ptab-icon{font-size:.95rem}
.platform-panels{}
.platform-panel{display:none}
.platform-panel.active{display:block}
.panel-content{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);padding:2.5rem}
.panel-text h3{font-size:1.35rem;font-weight:700;margin-bottom:.75rem;letter-spacing:-.5px}
.panel-text p{font-size:.9rem;color:var(--muted);line-height:1.7;margin-bottom:1rem}
.panel-list{display:flex;flex-direction:column;gap:.4rem}
.panel-list li{font-size:.875rem;color:var(--mid);font-weight:500}
@media(max-width:800px){.panel-content{grid-template-columns:1fr}}

/* MOCK DASHBOARD */
.mock-dashboard{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:var(--shadow)}
.mock-dash-header{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}
.mock-search{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:.45rem .85rem;font-size:.8rem;color:var(--muted)}
.mock-filters{display:flex;gap:.35rem}
.mock-pill{background:#fff;border:1px solid var(--border);border-radius:100px;padding:.2rem .6rem;font-size:.72rem;font-weight:500;color:var(--muted)}
.mock-pill.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.mock-table-header{display:grid;grid-template-columns:1.5fr repeat(3,1fr);padding:.4rem .6rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2)}
.mock-table-row{display:grid;grid-template-columns:1.5fr repeat(3,1fr);padding:.55rem .6rem;background:#fff;border-radius:8px;margin-bottom:.35rem;font-size:.78rem;align-items:center;border:1px solid var(--border)}

/* MOCK COUNTRY CARD */
.mock-country-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:var(--shadow)}
.mcc-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.mcc-flag{font-size:2rem}
.mcc-name{font-weight:700;font-size:1rem}
.mcc-sub{font-size:.72rem;color:var(--muted)}
.mcc-rows{display:flex;flex-direction:column;gap:.35rem}
.mcc-row{display:flex;justify-content:space-between;padding:.45rem .5rem;border-bottom:1px solid var(--border);font-size:.82rem}
.mcc-row:last-child{border:none}
.mcc-row span:first-child{color:var(--muted)}
.mandatory-text{color:var(--green-dark);font-weight:600}
.phased-text{color:#B45309;font-weight:600}

/* MOCK COMPARE */
.mock-compare{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:var(--shadow)}
.mock-compare-header,.mock-compare-row{display:grid;grid-template-columns:1fr repeat(3,1fr);gap:.5rem;padding:.5rem .4rem;font-size:.78rem;align-items:center}
.mock-compare-header{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2);border-bottom:1px solid var(--border);margin-bottom:.25rem}
.mock-compare-row{background:#fff;border-radius:6px;margin-bottom:.3rem;border:1px solid var(--border)}
.mock-compare-row span:first-child{color:var(--muted);font-weight:500}

/* MOCK DISCUSSION */
.mock-discussion{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.75rem}
.disc-item{display:flex;gap:.75rem;align-items:flex-start}
.disc-avatar{width:36px;height:36px;border-radius:50%;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;flex-shrink:0}
.disc-avatar.locked{background:var(--bg-3);color:var(--muted-2);font-size:1rem}
.disc-body{}
.disc-meta{font-size:.7rem;color:var(--muted);margin-bottom:.25rem}
.disc-text{font-size:.82rem;color:var(--mid);line-height:1.55}
.disc-faded{opacity:.5}
.locked-text{font-style:italic;color:var(--muted)}

/* TRUST SECTION */
.trust-section{background:var(--bg)}
.trust-how{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2.5rem;margin:2rem 0 2.5rem}
.trust-how-title{font-size:1.1rem;font-weight:700;margin-bottom:2rem;text-align:center}
.trust-steps{display:flex;align-items:flex-start;gap:.75rem;flex-wrap:wrap;justify-content:center}
.trust-step{flex:1;min-width:160px;max-width:180px;text-align:center;position:relative}
.ts-num{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--dark);color:#fff;font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.ts-icon{font-size:1.75rem;margin-bottom:.6rem}
.trust-step h4{font-size:.85rem;font-weight:700;margin-bottom:.3rem}
.trust-step p{font-size:.78rem;color:var(--muted);line-height:1.5}
.trust-arrow{font-size:1.25rem;color:var(--muted-2);align-self:center;padding-top:1rem;flex-shrink:0}
@media(max-width:768px){.trust-arrow{display:none}.trust-step{min-width:130px}}

.trust-score-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.tsd-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem}
.tsd-score{display:flex;align-items:center;gap:1rem}
.score-ring{position:relative;width:80px;height:80px;flex-shrink:0}
.ring-svg{width:80px;height:80px;transform:rotate(-90deg)}
.ring-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-weight:700;font-size:1rem;color:var(--dark)}
.tsd-country{font-weight:700;font-size:.95rem;margin-bottom:.2rem}
.tsd-updated{font-size:.72rem;font-weight:600;color:var(--green-dark);background:var(--green-bg);display:inline-block;padding:.1rem .5rem;border-radius:100px;margin-bottom:.4rem}
.tsd-comment{font-size:.78rem;color:var(--muted);line-height:1.5;font-style:italic}
@media(max-width:768px){.trust-score-demo{grid-template-columns:1fr}}

/* IMPLEMENTATION */
.implementation{background:var(--dark);color:#fff}
.implementation .section-label{background:rgba(34,197,94,.1);color:var(--green);border-color:rgba(34,197,94,.2)}
.implementation .section-title{color:#fff}
.implementation .section-sub{color:rgba(255,255,255,.65);margin-bottom:3rem}
.impl-sub{font-size:1.15rem;font-weight:700;color:#fff;margin-bottom:.5rem}
.impl-sub-p{color:rgba(255,255,255,.6);font-size:.9rem;margin-bottom:2rem}
.challenges-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:3rem}
.challenge-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:1.5rem;transition:background .3s}
.challenge-card:hover{background:rgba(255,255,255,.08)}
.challenge-icon{font-size:1.75rem;margin-bottom:.75rem}
.challenge-card h4{font-size:.9rem;font-weight:700;color:#fff;margin-bottom:.5rem}
.challenge-card p{font-size:.82rem;color:rgba(255,255,255,.6);line-height:1.6}
@media(max-width:900px){.challenges-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.challenges-grid{grid-template-columns:1fr}}

.impl-guide-sections{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:2.5rem}
.impl-guide-sections h3{font-size:1.15rem;font-weight:700;color:#fff;margin-bottom:.5rem}
.impl-guide-sections>p{color:rgba(255,255,255,.6);font-size:.9rem;margin-bottom:2rem}
.guide-sections-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:2rem}
.gs-item{display:flex;align-items:flex-start;gap:.75rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:.85rem}
.gs-num{font-family:var(--mono);font-size:.75rem;font-weight:700;color:var(--green);flex-shrink:0;padding-top:.1rem}
.gs-text{display:flex;flex-direction:column;gap:.15rem}
.gs-text strong{font-size:.85rem;color:#fff}
.gs-text span{font-size:.78rem;color:rgba(255,255,255,.5)}
.impl-cta{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.impl-meta{font-size:.8rem;color:rgba(255,255,255,.5)}
@media(max-width:768px){.guide-sections-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.guide-sections-grid{grid-template-columns:1fr}}

/* TESTIMONIALS */
.testimonials{background:var(--bg-2)}
.testimonials .section-sub{margin-bottom:2.5rem}
.testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.testi-large{grid-row:span 2}
.testi-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);padding:2rem;position:relative;transition:transform .3s,box-shadow .3s}
.testi-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.testi-linkedin{position:absolute;top:1.5rem;right:1.5rem;background:#0A66C2;color:#fff;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}
.testi-card p{font-size:.9rem;color:var(--muted);line-height:1.75;margin-bottom:1.5rem;font-style:italic}
.testi-footer{display:flex;align-items:center;gap:.85rem}
.testi-avatar{width:42px;height:42px;border-radius:50%;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0}
.testi-footer strong{display:block;font-size:.875rem;margin-bottom:.15rem}
.testi-footer span{display:block;font-size:.78rem;color:var(--muted)}
.testi-role-badge{display:inline-block;background:var(--green-bg);color:var(--green-dark);padding:.1rem .5rem;border-radius:100px;font-size:.7rem;font-weight:600;margin-top:.2rem}
@media(max-width:768px){.testi-grid{grid-template-columns:1fr}.testi-large{grid-row:span 1}}

/* COMPANIES */
.companies-section{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:2.5rem 0}
.companies-label{text-align:center;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:1.5rem}
.companies-track-wrap{position:relative;overflow:hidden}
.companies-fade-left,.companies-fade-right{position:absolute;top:0;bottom:0;width:100px;z-index:1}
.companies-fade-left{left:0;background:linear-gradient(to right,var(--bg-2),transparent)}
.companies-fade-right{right:0;background:linear-gradient(to left,var(--bg-2),transparent)}
.companies-track{overflow:hidden}
.companies-slide{display:flex;gap:1.5rem;animation:scroll-companies 30s linear infinite;width:max-content;align-items:center}
.company-name{font-weight:700;font-size:.95rem;color:var(--muted);white-space:nowrap;padding:.4rem 1.25rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius);letter-spacing:.02em}
.companies-note{text-align:center;font-size:.75rem;color:var(--muted-2);margin-top:1.25rem}

/* FAQ */
.faq{background:var(--bg)}
.faq-wrap{max-width:800px}
.faq-list{margin-top:2.5rem;display:flex;flex-direction:column;gap:.5rem}
.faq-item{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .2s}
.faq-item[open]{border-color:var(--green)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.25rem;font-weight:600;font-size:.925rem;gap:1rem;list-style:none}
.faq-q::after{content:'+';font-size:1.3rem;font-weight:300;color:var(--muted);flex-shrink:0;transition:transform .3s}
details[open]>.faq-q::after{content:'−'}
.faq-a{padding:0 1.25rem 1.25rem}
.faq-a p{font-size:.875rem;color:var(--muted);line-height:1.75}

/* CTA */
.cta-section{background:var(--dark);padding:5rem 0;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-glow{position:absolute;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.08),transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.cta-inner{position:relative;z-index:1}
.cta-section h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-1.5px;margin-bottom:.75rem}
.cta-section p{font-size:1rem;color:rgba(255,255,255,.7);margin-bottom:2rem;max-width:550px;margin-left:auto;margin-right:auto;line-height:1.7}
.cta-actions{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;margin-bottom:2.5rem}
.cta-stats{display:flex;justify-content:center;align-items:center;gap:1.5rem;flex-wrap:wrap}
.cta-stat{text-align:center}
.cta-stat strong{display:block;font-size:1.5rem;font-weight:800;color:#fff}
.cta-stat span{font-size:.78rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em}
.cta-stat-div{width:1px;height:32px;background:rgba(255,255,255,.15)}

/* FOOTER */
.footer{background:var(--dark-2);color:rgba(255,255,255,.6);padding:3.5rem 0 0}
.footer-top{display:grid;grid-template-columns:1fr 2fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid var(--border-dark)}
.footer-brand .logo{margin-bottom:1rem}
.footer-brand p{font-size:.85rem;line-height:1.7;max-width:260px}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.footer-col h4{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fff;margin-bottom:.85rem}
.footer-col ul{display:flex;flex-direction:column;gap:.45rem}
.footer-col a{font-size:.85rem;transition:color .15s}
.footer-col a:hover{color:#fff}
.footer-bottom{padding:1.5rem 0;display:flex;flex-direction:column;gap:.5rem;align-items:center;text-align:center}
.footer-bottom p{font-size:.8rem}
.footer-bottom a{color:var(--green)}
.footer-disclaimer{font-size:.75rem;color:rgba(255,255,255,.35);max-width:600px}
.footer-powered{font-size:.75rem;color:rgba(255,255,255,.4)}
.footer-powered a{color:rgba(255,255,255,.6);text-decoration:underline;text-decoration-color:rgba(255,255,255,.2)}
.footer-powered a:hover{color:#fff}

/* RESPONSIVE */
@media(max-width:900px){.nav-links,.nav-actions{display:none}.hamburger{display:flex}.mobile-nav{display:block}.footer-top{grid-template-columns:1fr}.footer-links{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.platform-tabs{flex-direction:column}.ptab{justify-content:flex-start}.filter-bar{flex-direction:column;align-items:stretch}.search-box{min-width:0}}
@media(max-width:480px){.hero-actions{flex-direction:column;align-items:flex-start}.updates-ticker{flex-direction:column;gap:.5rem}.footer-links{grid-template-columns:1fr}}

/* ================================================
   MODALS, POPUPS & FORMS
   ================================================ */

/* BACKDROP */
.modal-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(15,23,42,.55); backdrop-filter: blur(4px);
  z-index: 1000; opacity: 0; transition: opacity .25s;
}
.modal-backdrop.active { display: block; opacity: 1; }

/* MODAL BASE */
.modal {
  display: none; position: fixed;
  top: 50%; left: 50%; transform: translate(-50%, -48%);
  background: #fff; border-radius: var(--radius-xl);
  box-shadow: 0 32px 80px rgba(0,0,0,.22);
  width: 92%; max-width: 480px; max-height: 88vh;
  overflow-y: auto; z-index: 1010;
  padding: 2rem; opacity: 0;
  transition: opacity .25s, transform .25s;
}
.modal.modal-wide { max-width: 640px; }
.modal.active {
  display: block; opacity: 1;
  transform: translate(-50%, -50%);
}
.modal-close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-3); color: var(--muted);
  font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; line-height: 1;
}
.modal-close:hover { background: var(--border); color: var(--dark); }

/* MODAL TYPOGRAPHY */
.modal-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -.5px; margin-bottom: .4rem; }
.modal-subtitle { font-size: .875rem; color: var(--muted); margin-bottom: 1.5rem; line-height: 1.6; }
.modal-note { font-size: .78rem; color: var(--muted); text-align: center; margin-top: .75rem; line-height: 1.5; }
.modal-note a { color: var(--blue); }
.modal-note a:hover { text-decoration: underline; }
.modal-switch { font-size: .82rem; color: var(--muted); text-align: center; margin-top: .5rem; }
.modal-switch a { color: var(--dark); font-weight: 600; }
.modal-switch a:hover { text-decoration: underline; }

/* LINKEDIN HEADER */
.modal-linkedin-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem;
}
.modal-li-logo {
  width: 48px; height: 48px; border-radius: 10px;
  background: #0A66C2; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 800; flex-shrink: 0;
}
.modal-linkedin-header h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: .15rem; }
.modal-linkedin-header p { font-size: .82rem; color: var(--muted); }

/* BENEFITS LIST */
.modal-li-benefits {
  background: var(--bg-2); border-radius: var(--radius);
  padding: 1rem; margin-bottom: 1.25rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.li-benefit {
  display: flex; align-items: center; gap: .6rem;
  font-size: .85rem; color: var(--mid);
}
.li-benefit span { color: var(--green-dark); font-weight: 700; flex-shrink: 0; }

/* LINKEDIN BUTTON */
.btn-linkedin-signin {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  width: 100%; padding: .8rem;
  background: #0A66C2; color: #fff;
  border-radius: var(--radius); font-size: .95rem; font-weight: 600;
  cursor: pointer; border: none; font-family: var(--font);
  transition: background .2s, transform .15s;
}
.btn-linkedin-signin:hover { background: #004182; transform: translateY(-1px); }

/* DIVIDER */
.modal-divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.1rem 0; color: var(--muted-2); font-size: .78rem;
}
.modal-divider::before, .modal-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* FORM FIELDS */
.modal-field-group { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.modal-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.modal-input {
  width: 100%; padding: .65rem .9rem;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: .875rem; font-family: var(--font); color: var(--dark);
  background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.modal-input:focus { border-color: var(--dark); box-shadow: 0 0 0 3px rgba(15,23,42,.07); }
.modal-input::placeholder { color: var(--muted-2); }
.modal-select { cursor: pointer; }
.modal-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.modal-submit-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: .85rem; font-size: .95rem;
  border-radius: var(--radius); cursor: pointer;
}

/* FEEDBACK TYPE BUTTONS */
.feedback-types { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.fb-type {
  padding: .4rem .85rem; border-radius: 100px;
  border: 1.5px solid var(--border); font-size: .8rem; font-weight: 500;
  background: #fff; color: var(--muted); cursor: pointer;
  transition: all .15s;
}
.fb-type:hover { border-color: var(--dark); color: var(--dark); }
.fb-type.active { background: var(--dark); color: #fff; border-color: var(--dark); }

/* STAR RATING */
.feedback-rating {
  display: flex; align-items: center; gap: 1rem;
  font-size: .85rem; color: var(--mid); margin-bottom: 1rem;
}
.star-rating { display: flex; gap: .25rem; }
.star { font-size: 1.5rem; color: var(--border); cursor: pointer; transition: color .15s; }
.star.active, .star:hover { color: var(--amber); }

/* NEWS MODAL */
.news-feed { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; max-height: 300px; overflow-y: auto; }
.news-item {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .9rem;
}
.news-item.urgent { border-color: #FCA5A5; background: #FFF5F5; }
.news-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.news-tag {
  padding: .1rem .45rem; border-radius: 4px;
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.new-tag { background: var(--green-bg); color: var(--green-dark); }
.update-tag { background: var(--blue-bg); color: var(--blue); }
.upcoming-tag { background: var(--amber-bg); color: #92400E; }
.news-date { font-size: .75rem; color: var(--muted); }
.news-country { font-weight: 700; font-size: .875rem; margin-bottom: .25rem; }
.news-text { font-size: .82rem; color: var(--muted); line-height: 1.55; }
.news-subscribe { background: var(--bg-2); border-radius: var(--radius-lg); padding: 1.25rem; border: 1px solid var(--border); }
.news-subscribe h3 { font-size: .95rem; font-weight: 700; margin-bottom: .75rem; }
.news-subscribe-row { display: flex; gap: .5rem; }
.news-subscribe-row .modal-input { flex: 1; }

/* READINESS SCORE */
.rs-progress {
  height: 4px; background: var(--border); border-radius: 2px;
  margin-bottom: 1.5rem; overflow: hidden;
}
.rs-bar { height: 100%; background: var(--green); border-radius: 2px; transition: width .4s ease; }
.readiness-steps {}
.readiness-step { display: none; }
.readiness-step.active { display: block; }
.rs-q { font-size: .95rem; font-weight: 700; margin-bottom: 1rem; color: var(--dark); }
.rs-options { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.25rem; }
.rs-opt {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .9rem; border: 1.5px solid var(--border);
  border-radius: var(--radius); cursor: pointer; font-size: .875rem;
  transition: border-color .15s, background .15s;
}
.rs-opt:hover { border-color: var(--dark); background: var(--bg-2); }
.rs-opt input { width: 16px; height: 16px; accent-color: var(--dark); flex-shrink: 0; }
.rs-next-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: .75rem; font-size: .9rem; cursor: pointer; }
.rs-score-display { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.rs-score-ring { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.rs-score-num { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--mono); font-weight: 800; font-size: 1.3rem; color: var(--dark); }
.rs-score-label { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; }
.rs-result-text { font-size: .875rem; color: var(--muted); line-height: 1.65; }
.rs-view-btn { margin-top: 1rem; }

/* ALERTS */
.alerts-label { font-size: .85rem; font-weight: 600; margin-bottom: .5rem; color: var(--dark); }
.alert-country-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.alert-country-opt {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; padding: .35rem; cursor: pointer;
}
.alert-country-opt input { accent-color: var(--dark); }

/* FLOATING FEEDBACK FAB */
.feedback-fab {
  position: fixed; bottom: 1.5rem; left: 1.5rem; right: auto; z-index: 500;
  display: flex; align-items: center; gap: .5rem;
  background: var(--dark); color: #fff;
  padding: .6rem 1.1rem; border-radius: 100px;
  font-size: .82rem; font-weight: 600; font-family: var(--font);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  cursor: pointer; border: none;
  transition: transform .2s, box-shadow .2s;
}
.feedback-fab:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.25); }
/* Zoho chat widget — keep on right, no overlap with feedback on left */
.zsiq_floatmain, #zsiq_float, .siq_bR { right: 1.5rem !important; bottom: 1.5rem !important; }

/* SUCCESS TOAST */
.toast {
  position: fixed; bottom: 5rem; right: 1.5rem; z-index: 2000;
  display: flex; align-items: center; gap: .65rem;
  background: var(--dark); color: #fff;
  padding: .75rem 1.25rem; border-radius: 100px;
  font-size: .875rem; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  transform: translateY(20px); opacity: 0;
  transition: transform .3s, opacity .3s; pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* SCROLLBAR for modal */
.modal::-webkit-scrollbar { width: 6px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ================================================
   ABOUT / PRIVACY / TERMS MODAL STYLES
   ================================================ */
.about-section { margin-bottom: 1.25rem; }
.about-section h3 { font-size: .95rem; font-weight: 700; margin-bottom: .5rem; color: var(--dark); }
.about-section p { font-size: .875rem; color: var(--muted); line-height: 1.7; }
.about-list { list-style: none; display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.about-list li { font-size: .875rem; color: var(--muted); padding-left: 1.1rem; position: relative; line-height: 1.5; }
.about-list li::before { content: '→'; position: absolute; left: 0; color: var(--green-dark); font-size: .8rem; }
.about-stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; margin-bottom: 1.25rem; }
.about-stat { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem; text-align: center; }
.about-stat strong { display: block; font-size: 1.35rem; font-weight: 800; color: var(--dark); letter-spacing: -.5px; }
.about-stat span { font-size: .75rem; color: var(--muted); }
.about-cta-row { display: flex; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.about-cta-row .btn { flex: 1; justify-content: center; }

.policy-body { max-height: 420px; overflow-y: auto; padding-right: .5rem; }
.policy-section { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.policy-section:last-child { border-bottom: none; }
.policy-section h3 { font-size: .9rem; font-weight: 700; margin-bottom: .5rem; color: var(--dark); }
.policy-section p { font-size: .85rem; color: var(--muted); line-height: 1.7; }
.policy-section a { color: var(--blue); }
.policy-section a:hover { text-decoration: underline; }
.policy-body::-webkit-scrollbar { width: 5px; }
.policy-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ================================================
   SEO CONTENT SECTIONS
   ================================================ */
.seo-section { padding: 4rem 0; }
.seo-section.seo-alt { background: var(--bg-2); }
.seo-section h3 { font-size: 1.05rem; font-weight: 700; color: var(--dark); margin-bottom: .75rem; }
.seo-sub-heading { font-size: 1rem; font-weight: 700; color: var(--dark); margin: 2rem 0 .75rem; }

/* 3-column grid */
.seo-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2rem 0; }
@media (max-width: 768px) { .seo-grid-3 { grid-template-columns: 1fr; } }

/* 2-column grid */
.seo-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin: 2rem 0; }
@media (max-width: 768px) { .seo-grid-2 { grid-template-columns: 1fr; } }

/* Cards */
.seo-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.seo-card-icon { font-size: 2rem; margin-bottom: .75rem; }
.seo-card p { font-size: .9rem; color: var(--muted); line-height: 1.7; }

/* Developer step cards */
.seo-dev-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; position: relative; }
.seo-dev-step { font-size: 2rem; font-weight: 900; color: var(--border); line-height: 1; margin-bottom: .6rem; letter-spacing: -1px; }
.seo-dev-card p { font-size: .9rem; color: var(--muted); line-height: 1.7; }

/* Info blocks */
.seo-info-block { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.seo-info-block p { font-size: .9rem; color: var(--muted); line-height: 1.7; margin-bottom: .75rem; }
.seo-list { list-style: none; padding: 0; margin: .75rem 0; display: flex; flex-direction: column; gap: .4rem; }
.seo-list li { font-size: .875rem; color: var(--muted); padding-left: 1.1rem; position: relative; line-height: 1.5; }
.seo-list li::before { content: '→'; position: absolute; left: 0; color: var(--green-dark); font-size: .8rem; }
.seo-list-numbered { counter-reset: seo-num; }
.seo-list-numbered li { counter-increment: seo-num; }
.seo-list-numbered li::before { content: counter(seo-num) '.'; color: var(--blue); font-weight: 700; }
.seo-note-small { font-size: .8rem; color: var(--muted); line-height: 1.6; margin-top: .75rem; padding: .65rem; background: var(--bg-2); border-radius: 6px; border-left: 3px solid var(--border); }
.seo-table-note { font-size: .875rem; color: var(--muted); margin-bottom: 1rem; }

/* Threshold table */
.seo-threshold-table { margin-top: 2rem; }
.seo-thresh-grid { display: flex; flex-direction: column; gap: .6rem; }
.seo-thresh-row { display: grid; grid-template-columns: 160px 1fr; gap: 1rem; align-items: start; padding: .75rem 1rem; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
@media (max-width: 600px) { .seo-thresh-row { grid-template-columns: 1fr; gap: .25rem; } }
.seo-thresh-country { font-weight: 700; font-size: .875rem; color: var(--dark); }
.seo-thresh-detail { font-size: .875rem; color: var(--muted); line-height: 1.5; }

/* PEPPOL country tags */
.seo-peppol-countries { margin-top: 2rem; }
.seo-country-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.seo-ctag { display: inline-flex; align-items: center; padding: .3rem .75rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: 100px; font-size: .8rem; color: var(--dark); font-weight: 500; }

/* GCC / UAE / ZATCA grid */
.seo-gcc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin: 2rem 0; }
@media (max-width: 768px) { .seo-gcc-grid { grid-template-columns: 1fr; } }
.seo-gcc-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; }
.seo-gcc-flag { font-size: 2.5rem; margin-bottom: .75rem; line-height: 1; }
.seo-gcc-card p { font-size: .9rem; color: var(--muted); line-height: 1.7; margin-bottom: 1rem; }

/* Timelines */
.seo-timeline { display: flex; flex-direction: column; gap: .4rem; margin: 1rem 0; }
.seo-tl-item { display: grid; grid-template-columns: 90px 1fr; gap: .75rem; align-items: center; padding: .45rem .75rem; border-radius: 6px; font-size: .85rem; background: var(--bg-2); }
.seo-tl-date { font-weight: 700; color: var(--dark); font-size: .8rem; }
.seo-tl-text { color: var(--muted); }
.seo-tl-key { background: #f0fdf4; border-left: 3px solid var(--green-dark); }
.seo-tl-key .seo-tl-date { color: var(--green-dark); }
.seo-tl-done { opacity: .6; }

/* ViDA timeline */
.seo-vida-timeline { display: flex; flex-direction: column; gap: .4rem; margin: 1rem 0; }
.seo-vida-item { padding: .45rem .75rem; background: var(--bg-2); border-radius: 6px; font-size: .85rem; color: var(--muted); line-height: 1.5; }
.seo-vida-key { background: #eff6ff; border-left: 3px solid var(--blue); }

/* EU mandates */
.seo-eu-mandates { display: flex; flex-direction: column; gap: .6rem; margin-top: .75rem; }
.seo-eu-row { display: flex; gap: .75rem; align-items: flex-start; padding: .5rem .75rem; background: var(--bg-2); border-radius: 6px; font-size: .875rem; }
.seo-eu-flag { font-size: 1.3rem; flex-shrink: 0; line-height: 1.4; }
.seo-eu-row div { color: var(--muted); line-height: 1.5; }
.seo-eu-row strong { color: var(--dark); }

/* Format table */
.seo-formats-table { margin-top: 2rem; }
.seo-fmt-grid { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seo-fmt-row { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 0; padding: .6rem 1rem; font-size: .875rem; border-bottom: 1px solid var(--border); }
.seo-fmt-row:last-child { border-bottom: none; }
.seo-fmt-row.header { background: var(--bg-2); font-weight: 700; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.seo-fmt-row span:first-child { font-weight: 600; color: var(--dark); }
.seo-fmt-row span { color: var(--muted); display: flex; align-items: center; }
@media (max-width: 600px) { .seo-fmt-row { grid-template-columns: 1fr; gap: .1rem; padding: .75rem 1rem; } .seo-fmt-row.header { display: none; } }

/* CTA row */
.seo-dev-cta { margin-top: 2rem; padding: 1.5rem; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius); display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.seo-dev-cta p { flex: 1; min-width: 200px; font-size: .9rem; color: var(--dark); margin: 0; }

/* Testimonial ZATCA/NetSuite badges */
.testi-role-badge.badge-zatca { background: #fef3c7; color: #92400e; }
.testi-role-badge.badge-netsuite { background: #dbeafe; color: #1e40af; }