/*
Theme Name: Sukna
Theme URI: https://sukna.co
Author: Marvel Technology
Description: Custom theme for Sukna — the operating system for modern communities. Lightweight, hand-built, and structured for easy maintenance.
Version: 4.3.7
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sukna
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  --navy:#0b1322;          /* page background        */
  --navy-2:#0C1830;        /* panels / deep sections */
  --mint:#A8FCD8;          /* primary accent         */
  --ink:#EAF1EE;           /* primary text           */
  --ink-70:rgba(234,241,238,.7);
  --ink-55:rgba(234,241,238,.55);
  --ink-40:rgba(234,241,238,.4);
  --line:rgba(255,255,255,.10);
  --glass:rgba(255,255,255,.04);
  --glass-2:rgba(255,255,255,.06);
  --blue:120,150,255;      /* secondary gradient (rgb) */
  --serif:'PT Serif',Georgia,serif;
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --r-sm:14px; --r-md:18px; --r-lg:26px;
  --container:1180px;
  --shadow:0 30px 70px rgba(0,0,0,.45);
}

/* ============================================================
   2. BASE
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--navy);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--mint);color:var(--navy-2)}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.1;margin:0}
p{margin:0}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{position:relative;padding:96px 0}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:16px}
.section-title{font-size:clamp(28px,4vw,44px);letter-spacing:-.02em}
.section-lead{color:var(--ink-70);font-size:18px;max-width:60ch;margin-top:14px}
.text-mint{color:var(--mint)}

/* ============================================================
   3. AURORA BACKGROUND
   ============================================================ */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.aurora .a1{width:520px;height:520px;top:-120px;left:-80px;background:var(--mint);opacity:.14;animation:aurora 18s ease-in-out infinite}
.aurora .a2{width:600px;height:600px;bottom:-160px;right:-120px;background:rgb(var(--blue));opacity:.12;animation:aurora2 22s ease-in-out infinite}
@keyframes aurora{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,-4%) scale(1.15)}}
@keyframes aurora2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6%,5%) scale(1.18)}}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:var(--r-sm);
  font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,background .25s,filter .3s ease}
.btn-primary{background:var(--mint);color:var(--navy-2);box-shadow:0 10px 28px rgba(168,252,216,.3)}
.btn-ghost{background:var(--glass-2);border-color:rgba(255,255,255,.16);color:var(--ink)}
.btn-lg{padding:16px 28px;font-size:16px}
.sk-cta{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,filter .3s ease}

/* ===== Premium button hover: a quiet glowing mint edge + a gentle lift. Understated, not flashy.
   Applies to every button / CTA EXCEPT "Book a Demo" ([data-magnetic]), which keeps the
   stick-to-cursor magnetic pull. Mouse (fine-pointer) only. ===== */
@media (pointer:fine){
  .btn:not([data-magnetic]):hover,
  .sk-cta:not([data-magnetic]):hover{
    transform:translateY(-2px);
    box-shadow:0 0 0 1px rgba(168,252,216,.5),0 10px 30px rgba(168,252,216,.28)}
  .btn-primary:not([data-magnetic]):hover{
    box-shadow:0 0 0 1px rgba(255,255,255,.5),0 14px 38px rgba(168,252,216,.5);filter:brightness(1.03)}
  /* Book a Demo (magnetic): keeps the cursor-stick pull; soft glow only. */
  [data-magnetic]:hover{box-shadow:0 14px 40px rgba(168,252,216,.46);filter:brightness(1.03)}
}

/* ============================================================
   5. HEADER / NAV
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:rgba(11,19,34,.72);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ink)}
.brand-logo{display:inline-flex}
.brand-logo svg{height:30px;width:auto}
/* Entrance curtain: keep the Sukna logo perfectly centred on every page and device. */
#sk-curtain{display:flex;align-items:center;justify-content:center}
#sk-curtain>div{display:flex;align-items:center;justify-content:center;text-align:center;margin:0 auto}
#sk-curtain .brand-logo{display:flex;width:100%;align-items:center;justify-content:center}
#sk-curtain .brand-logo svg{width:100%;height:auto}
.hl{font-style:italic;color:var(--mint)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:15px;color:var(--ink-70);position:relative;transition:color .25s ease}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;border-radius:2px;
  background:var(--mint);box-shadow:0 0 8px rgba(168,252,216,.55);transform:scaleX(0);transform-origin:center;
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:14px}
.lang-toggle{background:none;border:1px solid var(--line);color:var(--ink-70);padding:8px 12px;border-radius:100px;font-size:13px;font-family:var(--sans);cursor:pointer}
.nav-burger{display:none;background:none;border:0;color:var(--ink);font-size:26px;cursor:pointer}

/* ============================================================
   6. HERO
   ============================================================ */
.hero{padding:120px 0 90px;text-align:center}
.hero h1{font-size:clamp(40px,7vw,84px);letter-spacing:-.03em;max-width:16ch;margin:0 auto}
.hero .section-lead{margin-left:auto;margin-right:auto;text-align:center;font-size:20px}
.hero-actions{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.hero-metrics{display:flex;gap:48px;justify-content:center;margin-top:64px;flex-wrap:wrap}
.metric .num{font-family:var(--serif);font-size:44px;color:var(--mint)}
.metric .lbl{font-size:14px;color:var(--ink-55);max-width:16ch}

/* ============================================================
   7. GLASS CARD (shared)
   ============================================================ */
.glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}

/* ============================================================
   8. HOME — PLATFORM MODULE SWITCHER
   ============================================================ */
.platform{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.mod-list{border-top:1px solid var(--line)}
.mod-row{display:flex;align-items:center;gap:16px;padding:22px 8px;border-top:1px solid transparent;border-radius:var(--r-sm);transition:.35s}
.mod-row:first-child{border-top:0}
.mod-row .mod-num{font-family:var(--serif);font-size:15px;color:var(--ink-40)}
.mod-row .mod-title{font-family:var(--serif);font-size:22px;color:var(--ink-55);flex:1;transition:color .3s}
.mod-row .mod-desc{font-size:14px;line-height:1.5;color:var(--ink-70);margin:8px 0 0;max-width:40ch;max-height:0;opacity:0;overflow:hidden;transition:.4s}
.mod-row.active{padding-left:16px;background:rgba(255,255,255,.03)}
.mod-row.active .mod-num{color:var(--mint)}
.mod-row.active .mod-title{color:var(--ink)}
.mod-row.active .mod-desc{max-height:80px;opacity:1;margin-top:8px}
.mod-media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--glass);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.mod-media img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   9. HOME — TWO EXPERIENCES
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.exp{padding:36px}
.exp h3{font-size:24px;margin-bottom:8px}
.exp p{color:var(--ink-70);margin-bottom:22px}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tag{padding:8px 14px;border-radius:100px;font-size:13px;background:var(--glass-2);border:1px solid var(--line);color:var(--ink-70)}

/* ============================================================
   10. FEATURE GRID (cards)
   ============================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.card{padding:30px}
.card .card-ico{font-size:24px;color:var(--mint);margin-bottom:16px}
.card h3{font-size:19px;margin-bottom:8px}
.card p{color:var(--ink-70);font-size:15px}

/* ============================================================
   11. TESTIMONIALS
   ============================================================ */
.marquee{overflow:hidden;margin-top:40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:22px;width:max-content;animation:marq 40s linear infinite}
.quote{width:360px;padding:28px}
.quote p{color:var(--ink);font-size:16px;line-height:1.6}
.quote .who{margin-top:18px;font-size:14px;color:var(--ink-55)}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ============================================================
   12. PRICING
   ============================================================ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.plan{display:flex;flex-direction:column;padding:32px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--line)}
.plan.featured{background:linear-gradient(160deg,rgba(168,252,216,.14),rgba(120,150,255,.07));border-color:rgba(168,252,216,.4);box-shadow:var(--shadow)}
.plan .badge{align-self:flex-start;padding:6px 13px;border-radius:100px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--glass-2);border:1px solid var(--line);color:var(--ink-70)}
.plan-name{font-size:24px;margin:18px 0 0}
.plan.featured .badge{background:var(--mint);color:var(--navy-2);border-color:transparent}
.plan .price{font-family:var(--serif);font-size:40px;margin:18px 0 2px}
.plan .unit{font-size:13px;color:var(--ink-55)}
.plan .tagline{color:var(--ink-70);font-size:15px;margin:14px 0 20px}
.plan ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:11px}
.plan li{font-size:14px;color:var(--ink-70);padding-left:24px;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--mint);font-weight:700}
.plan .btn{margin-top:auto;justify-content:center}
.included{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.included div{padding:16px 18px;font-size:14px;color:var(--ink-70)}

/* ============================================================
   13. FAQ / SUPPORT
   ============================================================ */
.channels{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:20px}
.channel{padding:30px;text-align:center}
.channel .card-ico{font-size:26px}
.channel a{color:var(--mint);font-weight:600;font-size:15px}
.faq{max-width:820px;margin:40px auto 0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;color:var(--ink);
  font-family:var(--serif);font-size:19px;text-align:left;padding:24px 0;cursor:pointer}
.faq-q .ico{color:var(--mint);font-size:22px;transition:transform .3s;flex:none}
.faq-item.open .faq-q .ico{transform:rotate(45deg)}
.faq-a{max-height:0;opacity:0;overflow:hidden;transition:.4s;color:var(--ink-70);font-size:15px;line-height:1.6}
.faq-item.open .faq-a{max-height:320px;opacity:1;padding-bottom:24px}

/* ============================================================
   14. LEGAL
   ============================================================ */
.legal{max-width:820px;margin:0 auto}
.legal .updated{color:var(--ink-55);font-size:14px;margin-bottom:40px}
.legal-block{margin-top:34px}
.legal-block h2{font-size:22px;margin-bottom:10px}
.legal-block p{color:var(--ink-70);font-size:15.5px}
/* Long-form legal document body (Privacy / Data Protection / Terms) */
.legal-body h2{font-family:var(--serif);font-weight:600;font-size:clamp(21px,2.6vw,26px);letter-spacing:-.015em;color:var(--ink);margin:44px 0 12px;padding-top:6px;border-top:1px solid rgba(255,255,255,.07)}
.legal-body > h2:first-child,.legal-body .lang-en > h2:first-child,.legal-body .lang-ar > h2:first-child{margin-top:0;border-top:0;padding-top:0}
.legal-body h3{font-family:var(--sans);font-weight:700;font-size:16.5px;color:var(--ink);margin:26px 0 8px}
.legal-body p{color:var(--ink-70);font-size:15.5px;line-height:1.72;margin:0 0 14px}
.legal-body ul{margin:2px 0 18px;padding-left:22px;list-style:disc}
.legal-body li{color:var(--ink-70);font-size:15.5px;line-height:1.66;margin:7px 0;padding-left:4px}
.legal-body li::marker{color:var(--mint)}
.legal-body a{color:var(--mint)}
/* Bilingual policy body: English by default, Arabic in Arabic mode.
   Layout/structure stays identical (left-to-right) — only the language changes. */
.legal-body .lang-ar{display:none}
body.sk-ar-mode .legal-body .lang-en{display:none}
body.sk-ar-mode .legal-body .lang-ar{display:block}

/* ============================================================
   15. CTA BAND
   ============================================================ */
.cta{text-align:center;padding:80px 40px;border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(168,252,216,.12),rgba(120,150,255,.06));border:1px solid rgba(168,252,216,.25)}
.cta h2{font-size:clamp(28px,4vw,42px)}
.cta p{color:var(--ink-70);margin:14px auto 28px;max-width:52ch}

/* ============================================================
   16. FOOTER
   ============================================================ */
.site-footer{border-top:1px solid var(--line);padding:70px 0 40px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.foot-brand p{color:var(--ink-70);font-size:15px;max-width:34ch;margin:16px 0 22px}
.stores{display:flex;gap:12px;flex-wrap:wrap}
.stores a{padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:13px;color:var(--ink-70)}
.foot-col h4{font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40);margin-bottom:16px}
/* Footer column links are inline-styled <a data-cursor> with no class, so we target them by
   scope: inside <footer>, tagged data-cursor, excluding the store + social buttons. Same hover
   as the top nav — text brightens and a mint underline draws in from the centre with a glow.
   (!important is needed on hover colour because the links carry an inline colour.) */
footer a[data-cursor]:not(.sk-store):not(.sk-social-a){position:relative;width:max-content;max-width:100%;transition:color .25s ease}
footer a[data-cursor]:not(.sk-store):not(.sk-social-a)::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;border-radius:2px;
  background:var(--mint);box-shadow:0 0 8px rgba(168,252,216,.55);transform:scaleX(0);transform-origin:center;
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
footer a[data-cursor]:not(.sk-store):not(.sk-social-a):hover{color:#EAF1EE !important}
footer a[data-cursor]:not(.sk-store):not(.sk-social-a):hover::after{transform:scaleX(1)}
/* Inline text links (e.g. "Visit Marvel Technology →") — the navigation-dock hover:
   a mint, softly-glowing underline draws in from the centre. */
.sk-tlink{position:relative;text-decoration:none}
.sk-tlink::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;border-radius:2px;
  background:var(--mint);box-shadow:0 0 8px rgba(168,252,216,.55);transform:scaleX(0);transform-origin:center;
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.sk-tlink:hover::after{transform:scaleX(1)}

/* Store badges + brand logo: subtle premium hover so every clickable element reacts. */
.sk-store{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease,filter .3s ease}
.brand{transition:opacity .25s ease,transform .3s cubic-bezier(.16,1,.3,1)}
@media (pointer:fine){
  .sk-store:hover{transform:translateY(-2px);border-color:rgba(168,252,216,.5)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 26px rgba(168,252,216,.22)!important;filter:brightness(1.05)}
  .brand:hover{opacity:.86;transform:translateY(-1px)}
}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:50px;padding-top:24px;border-top:1px solid var(--line);color:var(--ink-40);font-size:13px;flex-wrap:wrap;gap:10px}

/* ============================================================
   17. FX SUPPORT (reveal handled by SuknaFX via [data-reveal])
   ============================================================ */
/* Tile icons (feature + experience cards) — lifted in 3D by SuknaFX tile FX */
.tile-icon{width:44px;height:44px;margin-bottom:18px;display:block}
.card .tile-icon,.exp .tile-icon{transform-origin:center}
/* Testimonial avatar */
.quote-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;margin-bottom:16px;border:1px solid var(--line)}
/* EN / AR language toggle */
.lang-toggle{display:inline-flex;align-items:center;gap:6px}
.lang-toggle .lang-sep{opacity:.4}

/* ============================================================
   18. RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  /* Mobile nav (burger + dropdown panel) is injected by SuknaFX; just hide desktop items. */
  .nav-links,.nav-cta .btn{display:none}
  .platform,.split{grid-template-columns:1fr}
  .grid-3,.plans,.channels{grid-template-columns:1fr}
  .included{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .section{padding:64px 0}
}
@media (max-width:560px){
  .hero-metrics{gap:28px}
  .included,.foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   19. DESIGN REFINEMENTS v1.2 (match approved design screenshots)
   ============================================================ */

/* --- Floating pill header --- */
.site-header{position:sticky;top:14px;z-index:60;margin-top:14px;background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header .container{padding:0 24px}
.nav{height:auto;padding:9px 10px 9px 24px;border-radius:100px;background:rgba(12,18,30,.72);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.10);box-shadow:0 16px 44px rgba(0,0,0,.42)}
.nav-links{gap:26px}
.lang-toggle{padding:8px 14px;border-radius:100px;background:rgba(255,255,255,.04)}
.nav-cta{gap:12px}
.nav-cta .btn-primary{padding:11px 20px}

/* --- Hero: left-aligned variant (home / about) + badge --- */
.hero-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:100px;
  border:1px solid rgba(168,252,216,.28);background:rgba(168,252,216,.05);color:var(--mint);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:26px}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint)}
.hero.hero-left{text-align:left;padding:56px 0 70px}
.hero.hero-left h1{margin:0;max-width:18ch}
.hero.hero-left .section-lead{margin:0;max-width:46ch}
.hero-body{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;flex-wrap:wrap;margin-top:26px}
.hero.hero-left .hero-actions{justify-content:flex-start;margin-top:0;flex:none}

/* --- Big statement section --- */
.statement h2{font-size:clamp(28px,4.4vw,50px);line-height:1.14;max-width:20ch}

/* --- Photo card (Real communities) with metrics --- */
.photo-card{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:52px;min-height:360px;
  display:flex;flex-direction:column;justify-content:flex-end;background-size:cover;background-position:center;border:1px solid var(--line)}
.photo-card::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,rgba(11,19,34,.94),rgba(11,19,34,.6) 55%,rgba(11,19,34,.12))}
.photo-card>*{position:relative;z-index:1}
.photo-card .section-lead{max-width:50ch}
.photo-card .hero-metrics{margin-top:34px;justify-content:flex-start}

/* --- FAQ: rounded cards, circular +/x, cursor-tracking hover --- */
.faq{max-width:900px}
.faq-item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass);margin-bottom:14px;
  overflow:hidden;transition:border-color .35s ease,box-shadow .35s ease}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item.open{border-color:rgba(168,252,216,.3);box-shadow:0 18px 44px rgba(0,0,0,.32)}
.faq-q{padding:22px 24px;font-size:18px;gap:18px}
.faq-q .ico{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(168,252,216,.4);
  color:var(--mint);display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1;
  transition:transform .35s cubic-bezier(.16,.84,.28,1),background .3s ease}
.faq-item.open .faq-q .ico{transform:rotate(45deg);background:rgba(168,252,216,.14)}
.faq-a{padding:0 24px;max-height:0;opacity:0}
.faq-item.open .faq-a{max-height:360px;opacity:1;padding-bottom:24px}

@media (max-width:900px){
  .hero-body{flex-direction:column;align-items:flex-start;gap:26px}
  .photo-card{padding:32px;min-height:300px}
}

/* ============================================================
   20. PRODUCT SHOWCASE + PHONE-APP MOCKUP
   ============================================================ */
.showcase{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:56px;display:flex;align-items:center;gap:52px;
  background:linear-gradient(150deg,#c7f3de,#eef7f2 55%,#dbf1e8);color:#0b1322;flex-wrap:wrap}
.showcase-copy{flex:1;min-width:280px}
.showcase-copy .section-title{color:#0b1322}
.showcase-copy .section-title .hl{color:#1f9e72;font-style:normal}
.showcase-badge{display:inline-flex;align-items:center;gap:9px;margin-top:24px;padding:10px 18px;border-radius:100px;
  background:rgba(11,19,34,.92);color:#fff;font-size:13px;font-weight:600}
.showcase-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--mint)}

/* Phone device frame */
.device{flex:none;width:272px;background:#0b1322;border-radius:42px;padding:11px;
  box-shadow:0 44px 90px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.06);position:relative}
.device-notch{position:absolute;top:19px;left:50%;transform:translateX(-50%);width:104px;height:24px;background:#0b1322;border-radius:14px;z-index:3}
.device-screen{background:#f3f8f5;border-radius:32px;overflow:hidden;aspect-ratio:9/18.5;display:flex;flex-direction:column;padding:42px 16px 14px;color:#0b1322}
.app-status{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;margin-bottom:16px}
.app-dots{color:#0b1322;letter-spacing:1px}
.app-hi{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.1}
.app-sub{font-size:12.5px;color:#5c6b66;margin:2px 0 14px}
.app-banner{background:#0b1322;border-radius:16px;padding:16px;display:flex;justify-content:center;margin-bottom:16px}
.app-banner .brand-logo svg{height:22px;width:auto}
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.app-tile{background:#fff;border:1px solid #e8f0eb;border-radius:15px;padding:11px 4px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 4px 12px rgba(16,40,30,.05)}
.app-tile .ib{width:38px;height:38px;border-radius:11px;background:#0f1a2e;display:flex;align-items:center;justify-content:center}
.app-tile .ib img{width:22px;height:22px}
.app-tile .lbl{font-size:9.5px;font-weight:600;color:#3a4a45}
.app-tabs{margin-top:auto;display:flex;justify-content:space-between;padding:12px 8px 2px;border-top:1px solid #e8f0eb;font-size:10px;color:#9fb0a9}
.app-tabs .on{color:#0b1322;font-weight:700}
@media (max-width:760px){.showcase{padding:34px;justify-content:center}.device{width:250px}}

/* ============================================================
   21. HERO SHOWCASE — TWO FLOATING PHONES (exact design)
   ============================================================ */
.showcase{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:52px 56px;display:flex;align-items:center;gap:24px;
  background:linear-gradient(135deg,#bff0da 0%,#eaf7f0 45%,#d6f0e6 100%);color:#0b1322;min-height:440px}
.showcase-copy{flex:1;min-width:260px;max-width:46%;position:relative;z-index:3}
.showcase-copy .section-title{color:#0b1322}
.showcase-copy .section-title .hl{color:#1f9e72;font-style:normal}
.showcase-badge{position:absolute;right:34px;bottom:34px;z-index:4;display:inline-flex;align-items:center;gap:10px;
  padding:11px 16px;border-radius:16px;background:rgba(255,255,255,.72);backdrop-filter:blur(10px);
  box-shadow:0 12px 30px rgba(16,40,30,.15);color:#0b1322}
.showcase-badge .bi{width:34px;height:34px;border-radius:10px;background:#0b1322;display:flex;align-items:center;justify-content:center;color:#A8FCD8;font-size:16px;flex:none}
.showcase-badge b{display:block;font-size:13px;font-weight:700}
.showcase-badge small{display:block;font-size:11.5px;color:#4a5a54}

.phones{position:relative;flex:1;min-width:340px;height:420px}
.phones .device{position:absolute;width:208px;background:#0b1322;border-radius:36px;padding:8px;
  box-shadow:0 44px 90px rgba(8,20,16,.4),inset 0 0 0 2px rgba(255,255,255,.05)}
.phones .device-screen{border-radius:29px;overflow:hidden;aspect-ratio:9/19.3;display:flex;align-items:center;justify-content:center;background:#fff}
.phones .device-screen img{width:100%;height:100%;object-fit:cover;display:block}
.phones .screen-dark{background:#0b1322}
.phones .screen-dark .brand-logo svg{height:26px;width:auto}
.device-back{right:40px;top:2px;transform:rotate(8deg);z-index:1}
.device-front{left:24px;top:66px;transform:rotate(-9deg);z-index:2}
@media (max-width:860px){
  .showcase{flex-direction:column;align-items:flex-start;padding:34px}
  .showcase-copy{max-width:100%}
  .phones{width:100%;height:380px;min-width:0}
  .device-back{right:auto;left:120px}.device-front{left:20px}
  .showcase-badge{position:static;margin-top:18px}
}

/* Module media: show full mockups on the site's navy (seamless, no crop) */
.mod-media{background:#0b1322;aspect-ratio:auto;min-height:360px}
.mod-media img{object-fit:contain}

/* ============================================================
   22. HERO SHOWCASE — EXACT (matches share/index.html)
   ============================================================ */
@keyframes floaty{0%,100%{transform:translate(var(--tx,0),0) rotate(var(--rot,0deg))}50%{transform:translate(var(--tx,0),-10px) rotate(var(--rot,0deg))}}
@keyframes floatSoft{0%,100%{translate:0 0}50%{translate:0 -8px}}

.showcase{position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:clamp(360px,40vw,520px);padding:0;
  background:linear-gradient(135deg,#bff0da 0%,#eaf7f0 45%,#d6f0e6 100%);display:block}
.showcase-copy{position:absolute;top:34px;left:34px;max-width:340px;z-index:3;padding:0}
.showcase-copy .oneapp{font-family:var(--serif);font-size:clamp(22px,2.5vw,32px);font-weight:700;line-height:1.12;letter-spacing:-.01em;color:#0C1830;margin:0}
.showcase-copy .oneapp .hl2{color:#0f7a56}

.showcase-badge{position:absolute;bottom:28px;right:30px;z-index:4;display:inline-flex;align-items:center;gap:12px;
  padding:12px 18px 12px 14px;border-radius:16px;background:rgba(255,255,255,.6);
  backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 14px 34px rgba(16,40,30,.16);color:#0b1322}
.showcase-badge .bi{width:34px;height:34px;border-radius:10px;background:#0b1322;display:flex;align-items:center;justify-content:center;color:#A8FCD8;font-size:16px;flex:none}
.showcase-badge b{display:block;font-size:13px;font-weight:700;line-height:1.2}
.showcase-badge small{display:block;font-size:11.5px;color:#4a5a54}

.phones{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
.phones-inner{position:relative;display:flex;align-items:flex-end;transform:translateY(14%)}
.ph{border-radius:34px;padding:7px;background:#0a0e15;border:1px solid rgba(0,0,0,.18);box-shadow:0 34px 70px rgba(12,24,48,.4)}
.ph img{display:block;width:100%;border-radius:28px}
.ph-back{--rot:-9deg;--tx:38px;width:clamp(150px,15vw,208px);transform:translate(38px,26px) rotate(-9deg);animation:floaty 8s ease-in-out infinite;z-index:1}
.ph-front{--rot:6deg;--tx:-38px;width:clamp(170px,17vw,238px);border-radius:38px;padding:8px;transform:translate(-38px,0) rotate(6deg);animation:floaty 7s ease-in-out infinite;animation-delay:.4s;z-index:2;margin-left:-46px}
.ph-splash{position:relative;width:100%;aspect-ratio:714/1600;border-radius:31px;background:linear-gradient(165deg,#0f1a2e,#0a1220);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:31%;height:5%;min-height:15px;background:#000;border-radius:100px;z-index:2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.ph-splash .brand-logo{width:62%;display:block}
.ph-splash .brand-logo svg{width:100%;height:auto}
@media (max-width:760px){
  .showcase{min-height:520px}
  .showcase-copy{max-width:70%}
  .ph-back{width:130px}.ph-front{width:150px;margin-left:-40px}
}

/* ============================================================
   23. PLATFORM SWITCHER — browser-chrome frame (exact)
   ============================================================ */
.platform{display:grid;grid-template-columns:0.92fr 1.08fr;gap:44px;align-items:start}
.mod-list{border-top:0;display:flex;flex-direction:column}
.mod-row{border-top:1px solid rgba(255,255,255,.09)}
.mod-row:first-child{border-top:0}
.mod-row .mod-body{flex:1}
.mod-arrow{font-size:20px;color:var(--ink-40);flex:none;transition:transform .3s ease,color .3s ease;transform:translateX(-6px)}
.mod-row.active .mod-arrow{color:var(--mint);transform:translateX(4px)}
.mod-media-wrap{position:sticky;top:100px}
.mod-frame{border-radius:24px;overflow:hidden;background:rgba(255,255,255,.05);
  backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 34px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.22)}
.mod-frame[hidden]{display:none}
.mod-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.mod-bar .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}
.mod-bartitle{margin-left:8px;font-size:12px;color:var(--ink-55)}
.mod-shot{background:#0b1322;display:flex;align-items:center;justify-content:center}
.mod-shot img{width:100%;display:block;object-fit:contain;max-height:440px}
.mod-pills{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px}
.mod-pill{font-size:12px;padding:7px 12px;border-radius:100px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink-70)}
@media(max-width:900px){.platform{grid-template-columns:1fr}.mod-media-wrap{position:static}}

/* ===== 24. Source-exact globals (home) ===== */
@keyframes floatmock{0%{transform:scale(1) translateY(0)}100%{transform:scale(1.035) translateY(-1.6%)}}
@keyframes kenburns{0%{transform:scale(1.06) translate(0,0)}100%{transform:scale(1.2) translate(-2.5%,-3.5%)}}
.sk-stack{}
.sk-hide-m{}
@media (max-width:900px){
  .sk-hide-m{display:none!important}
  .sk-stack{grid-template-columns:1fr!important}
}

/* ===== 25. Hero device stage (deterministic, centered) ===== */
.sk-phonestage{position:relative;margin:52px 0 0;border-radius:36px;overflow:hidden;background:linear-gradient(118deg,#EEF3F0 0%,#E7F1EC 46%,#B7F2D9 100%);box-shadow:0 50px 110px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6);min-height:clamp(445px,53vw,648px)}
.sk-glow-el{position:absolute;top:8%;right:10%;width:42%;height:70%;background:radial-gradient(ellipse at center,rgba(168,252,216,.7),transparent 70%);filter:blur(50px);pointer-events:none}
.sk-herocol{position:absolute;top:50%;left:46px;transform:translateY(-50%);z-index:3;max-width:min(420px,46%)}
.sk-oneapp{max-width:none;margin:0;font-family:var(--serif);font-size:clamp(25px,3.1vw,39px);font-weight:700;line-height:1.1;letter-spacing:-.018em;color:#0C1830}
.sk-oneapp span{color:#0f7a56}
.sk-phones{position:absolute;left:67%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;z-index:2}
.sk-ph{background:#0a0e15;border:1px solid rgba(0,0,0,.2)}
.sk-ph-back{width:clamp(150px,15.2vw,206px);border-radius:32px;padding:7px;box-shadow:0 30px 64px rgba(12,24,48,.34);animation:floatSoft 11s ease-in-out infinite;z-index:1}
.sk-ph-back img{display:block;width:100%;border-radius:28px}
.sk-ph-front{width:clamp(170px,17.4vw,236px);border-radius:38px;padding:8px;margin-left:-30px;box-shadow:0 40px 84px rgba(12,24,48,.4);animation:floatSoft 13s ease-in-out infinite;animation-delay:-5s;z-index:2}
.sk-ph-front img{display:block;width:100%;border-radius:31px}
.sk-ph-splash{position:relative;width:100%;aspect-ratio:714/1600;border-radius:31px;background:linear-gradient(165deg,#0f1a2e,#0a1220);display:flex;align-items:center;justify-content:center;overflow:hidden}
.sk-ph-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:31%;height:5%;min-height:15px;background:#000;border-radius:100px;z-index:2}
.sk-ph-splash img{width:62%;height:auto}
.sk-livechip{position:absolute;bottom:28px;right:30px;z-index:4;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;border-radius:16px;background:rgba(255,255,255,.55);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);border:1px solid rgba(255,255,255,.7);box-shadow:0 16px 40px rgba(12,24,48,.18)}
.sk-livechip .ic{width:38px;height:38px;flex:none;border-radius:11px;background:#0C1830;display:flex;align-items:center;justify-content:center}
.sk-livechip b{display:block;font-size:13.5px;font-weight:700;color:#0C1830}
.sk-livechip small{display:block;font-size:12px;color:rgba(12,24,48,.6);margin-top:2px}

/* ===== 26. Clean tile hover (matches design style-hover: lift + border + icon pop) ===== */
[data-tile]:hover{border-color:rgba(168,252,216,.35)!important}
.sk-modrow{outline:none}
.sk-modrow:hover{transform:none!important}
@media (max-width:900px){.sk-herocol{max-width:56%}}

/* ===== 27. Nav Log in button ===== */
/* Nav CTA buttons: pill-shaped to match the pill nav */
.nav-cta .btn{border-radius:100px}
.nav-cta .btn-primary{padding:11px 22px}
.btn-login{padding:11px 22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.22);color:#EAF1EE;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease}
.btn-login:hover{background:rgba(168,252,216,.14);border-color:rgba(168,252,216,.6);color:#A8FCD8;transform:translateY(-2px)}
@media (max-width:720px){.btn-login{display:none}}

/* ============================================================
   28. Responsive — phones, tablets, laptops, desktops, TVs
   ============================================================ */
/* Large screens & TVs: scale up so content is readable from a distance */
@media (min-width:1700px){ .container{max-width:1340px} }
@media (min-width:2200px){ html{font-size:18px} .container{max-width:1480px} }
@media (min-width:3000px){ html{font-size:20px} .container{max-width:1720px} }

/* iPad / tablet landscape: stack the platform (list over preview) */
@media (max-width:1024px){
  [data-platform]{grid-template-columns:1fr!important}
  [data-platform] > div:last-child > div{position:static!important}
}
/* Included-features grid: 4 -> 2 columns on tablet */
@media (max-width:900px){
  .sk-stack.sk-inc{grid-template-columns:1fr 1fr!important}
}
/* Phones: 2 -> 1 column for the included grid, tighten spacing */
@media (max-width:560px){
  .sk-stack.sk-inc{grid-template-columns:1fr!important}
}
/* Guard against horizontal overflow — root uses overflow-x:clip so it never blocks vertical scroll */
img,svg,video,canvas{max-width:100%}
html{overflow-x:clip}

/* ============================================================
   29. Mobile — bottom dock nav + hero stage fix + top bar
   ============================================================ */
.sk-dock{display:none}
@media (max-width:1024px){
  .nav-links{display:none!important}
  .nav-cta .btn{display:none!important}
  .lang-toggle{display:inline-flex!important}
  .sk-dock{
    display:flex;align-items:center;gap:6px;
    position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);
    z-index:95;padding:10px;border-radius:100px;
    background:rgba(12,18,30,.72);
    -webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
    border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14)
  }
  .sk-dock-a{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(234,241,238,.7);transition:background .25s ease,color .25s ease,transform .2s ease}
  .sk-dock-a svg{width:23px;height:23px}
  .sk-dock-a.active{background:#A8FCD8;color:#0C1830;box-shadow:0 2px 7px rgba(168,252,216,.22)}
  .sk-dock-a:active{transform:scale(.9)}
}
/* Hero device stage: stack text over phones on phones (no overlap) */
@media (max-width:640px){
  .sk-phonestage{min-height:auto;padding:26px 20px 28px}
  .sk-herocol{position:relative;top:auto;left:auto;transform:none;max-width:100%;margin:0 0 6px}
  .sk-glow-el{opacity:.5}
  .sk-phones{position:relative;left:auto;top:auto;bottom:auto;transform:none;margin:14px auto 0;justify-content:center}
  .sk-ph-back{width:128px;margin-top:18px} .sk-ph-front{width:150px;margin-left:-14px;box-shadow:0 26px 52px rgba(12,24,48,.5)}
  .sk-livechip{position:relative;bottom:auto;right:auto;margin:18px auto 0;width:max-content}
}

/* ===== 30. Floating WhatsApp widget ===== */

/* ============================================================
   31. BLOG — Sukna Journal (horizontal expand-on-hover tiles)
   ============================================================ */
.blog-hero{max-width:1240px;margin:0 auto;padding:80px 26px 26px}
.blog-eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);font-weight:700;margin:0}
.blog-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(40px,7vw,96px);line-height:.98;letter-spacing:-.035em;margin:20px 0 0;max-width:15ch}
.blog-lead{font-size:clamp(16px,2vw,20px);line-height:1.55;color:var(--ink-70);margin:24px 0 0;max-width:54ch}
.blog-wrap{max-width:1240px;margin:38px auto 0;padding:0 26px 30px}

.blog-cat{display:inline-block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);font-weight:700}
.blog-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-55);margin-top:14px}
.blog-meta .dot{opacity:.5}
.blog-read{margin-left:auto;color:var(--mint);font-weight:600;white-space:nowrap}

/* Featured */
.blog-featured{position:relative;display:block;border-radius:26px;overflow:hidden;min-height:370px;display:flex;align-items:flex-end;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px rgba(0,0,0,.45);
  transition:transform .5s cubic-bezier(.16,.84,.28,1),box-shadow .5s ease,border-color .4s ease}
.blog-featured-media{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04);transition:transform 1.2s cubic-bezier(.16,.84,.28,1);z-index:0}
.blog-featured::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,11,22,.95) 0%,rgba(6,11,22,.8) 40%,rgba(6,11,22,.28) 100%)}
.blog-featured-body{position:relative;z-index:2;padding:clamp(28px,4vw,54px);max-width:62ch}
.blog-featured-title{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3.6vw,46px);line-height:1.04;letter-spacing:-.02em;margin:14px 0 0;max-width:20ch}
.blog-featured-excerpt{font-size:15.5px;line-height:1.6;color:var(--ink-70);margin:16px 0 0;max-width:52ch}
.blog-featured:hover{border-color:rgba(168,252,216,.42);box-shadow:0 44px 92px rgba(0,0,0,.55),0 0 0 1px rgba(168,252,216,.22)}
.blog-featured:hover .blog-featured-media{transform:scale(1.1)}

/* Rows */
.blog-rows{display:flex;flex-direction:column;gap:16px;margin-top:16px}
/* Glass panel: opaque-ish translucent at rest (no backdrop-filter = smooth scroll),
   real frosted blur only on hover/focus where a single tile is affected. */
.blog-row{position:relative;display:grid;grid-template-columns:236px 1fr;gap:24px;align-items:center;
  border-radius:20px;padding:14px;background:rgba(16,24,40,.66);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 30px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .45s cubic-bezier(.16,.84,.28,1),background .4s ease,border-color .4s ease,box-shadow .45s ease}
.blog-row-media{width:100%;height:118px;border-radius:14px;background-size:cover;background-position:center;
  transition:height .5s cubic-bezier(.16,.84,.28,1),transform 1.2s cubic-bezier(.16,.84,.28,1)}
.blog-row-body{padding:6px 10px 6px 0;min-width:0}
.blog-row-title{font-family:var(--serif);font-weight:700;font-size:clamp(19px,2.1vw,27px);line-height:1.12;letter-spacing:-.015em;margin:9px 0 0}
.blog-row-more{max-height:0;opacity:0;transform:translateY(6px);overflow:hidden;will-change:max-height,opacity;
  transition:max-height .5s cubic-bezier(.16,.84,.28,1),opacity .45s ease,transform .5s cubic-bezier(.16,.84,.28,1)}
.blog-row-excerpt{font-size:14.5px;line-height:1.6;color:var(--ink-70);margin:12px 0 0;max-width:60ch}
.blog-row:hover,.blog-row:focus-within{background:rgba(24,36,56,.5);border-color:rgba(168,252,216,.38);
  -webkit-backdrop-filter:blur(14px) saturate(1.35);backdrop-filter:blur(14px) saturate(1.35);
  box-shadow:0 26px 60px rgba(0,0,0,.4),0 0 0 1px rgba(168,252,216,.18)}
.blog-row:hover .blog-row-more,.blog-row:focus-within .blog-row-more{max-height:180px;opacity:1;transform:none}
.blog-row:hover .blog-row-media,.blog-row:focus-within .blog-row-media{height:150px}

.blog-empty{padding:60px 0;text-align:center}
.blog-empty h2{font-family:var(--serif);font-size:clamp(26px,4vw,40px);letter-spacing:-.02em}
.blog-empty p{color:var(--ink-70);margin:14px auto 0;max-width:48ch}

/* Touch devices: no hover — show the detail, tidy the layout */
@media (hover:none){
  .blog-row-more{max-height:220px;opacity:1;transform:none}
}
@media (max-width:640px){
  .blog-row{grid-template-columns:1fr;gap:12px}
  .blog-row-media{height:158px}
  .blog-featured{min-height:320px}
  .blog-featured::after{background:linear-gradient(180deg,rgba(6,11,22,.35) 0%,rgba(6,11,22,.92) 72%)}
}

/* Single post */
.post-single{max-width:1240px;margin:0 auto;padding:70px 26px 0}
.post-back{color:var(--ink-55);font-size:14px;display:inline-block}
.post-back:hover{color:var(--ink)}
.post-hero .blog-cat{margin-top:26px}
.post-title{font-family:var(--serif);font-weight:700;font-size:clamp(30px,5vw,60px);line-height:1.03;letter-spacing:-.03em;margin:14px 0 0;max-width:22ch}
.post-cover{width:100%;aspect-ratio:16/7;border-radius:22px;background-size:cover;background-position:center;margin:34px 0 0;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.post-content{max-width:720px;margin:44px auto 0;font-size:17px;line-height:1.78;color:var(--ink-70)}
.post-content h2{font-family:var(--serif);color:var(--ink);font-size:clamp(24px,3vw,34px);margin:40px 0 12px;letter-spacing:-.02em}
.post-content h3{font-family:var(--serif);color:var(--ink);font-size:22px;margin:30px 0 10px}
.post-content p{margin:0 0 18px}
.post-content a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.post-content ul,.post-content ol{margin:0 0 18px;padding-left:22px}
.post-content li{margin:7px 0}
.post-content strong{color:var(--ink)}
.post-content blockquote{margin:26px 0;padding:14px 24px;border-left:2px solid var(--mint);color:var(--ink);font-family:var(--serif);font-size:20px;line-height:1.5}
.post-content img{border-radius:16px;margin:22px 0}
.post-cta{max-width:720px;margin:54px auto 0;padding:34px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);text-align:center}
.post-cta h3{font-family:var(--serif);font-size:26px;letter-spacing:-.02em}
.post-cta p{color:var(--ink-70);margin:12px auto 0;max-width:48ch}
.post-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* ===== 32. Footer social icons ===== */
.sk-social{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.sk-social-a{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--ink-70);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  transition:color .25s ease,background .25s ease,border-color .25s ease,transform .25s ease}
.sk-social-a svg{width:21px;height:21px}
.sk-social-a:hover{color:var(--navy-2);background:var(--mint);border-color:var(--mint);transform:translateY(-2px)}

/* ===== 33. Cursor — generic native arrow, tinted to the Sukna brand mint =====
   The old custom ring+dot follower was removed (felt laggy/annoying and hid the
   native pointer). This is a standard arrow shape rendered in brand mint so it
   still feels branded but behaves like a normal, instant, generic mouse pointer. */
:root{
  --sk-cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="26" viewBox="0 0 24 26"><path d="M3 2 3 20 8 15.4 11 22 14 20.8 11 14.3 17.5 14.3Z" fill="%23A8FCD8" stroke="%230B1322" stroke-width="1.2" stroke-linejoin="round"/></svg>') 3 2;
}
@media (pointer:fine){
  html, body{cursor:var(--sk-cursor), auto}
  /* Clickable things show the standard pointer hand (clear "you can click this" affordance);
     the brand mint arrow stays as the default cursor everywhere else.
     NOTE: we intentionally do NOT include [data-cursor] here — that attribute also sits on
     decorative, non-clickable tiles. Real clickables are links/buttons; the blog cards get the
     hand because they are <a> links (.blog-row / .blog-featured, listed for clarity). */
  a, button, [role="button"], .btn, [data-magnetic], summary, label[for], .skc-chip, .sk-dock-a, .sk-store, .sk-social-a, .blog-row, .blog-featured{cursor:pointer}
  input, textarea, select, [contenteditable]{cursor:text}
}
.blog-row:focus-within{transform:translateY(-4px)}

/* ============================================================
   34. SUKNA ASSISTANT (chatbot)
   ============================================================ */
@keyframes skcPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

.skc-panel{position:fixed;right:24px;bottom:98px;z-index:94;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 130px);
  display:flex;flex-direction:column;border-radius:22px;overflow:hidden;opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;
  background:rgba(12,18,30,.86);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14);
  transition:opacity .3s cubic-bezier(.16,.84,.28,1),transform .3s cubic-bezier(.16,.84,.28,1);font-family:var(--sans)}
body.skc-open .skc-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

.skc-head{display:flex;align-items:center;gap:12px;padding:16px 16px;background:linear-gradient(180deg,rgba(168,252,216,.1),rgba(168,252,216,0));border-bottom:1px solid rgba(255,255,255,.1)}
.skc-hav,.skc-av,.skc-hav svg,.skc-av svg{width:34px;height:34px}
.skc-hav{display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(168,252,216,.14);border:1px solid rgba(168,252,216,.3);flex:0 0 auto}
.skc-hav svg{width:20px;height:20px}
.skc-hmeta{display:flex;flex-direction:column;line-height:1.2;flex:1}
.skc-hmeta b{font-size:15px;color:#EAF1EE;font-weight:700}
.skc-hmeta span{font-size:12px;color:#A8FCD8;display:flex;align-items:center;gap:6px}
.skc-hmeta span::before{content:"";width:7px;height:7px;border-radius:50%;background:#25D366;display:inline-block;box-shadow:0 0 6px #25D366}
.skc-close{margin-left:auto;background:none;border:0;color:rgba(234,241,238,.6);font-size:15px;cursor:pointer;padding:6px}
.skc-close:hover{color:#EAF1EE}

.skc-msgs{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px}
.skc-msgs::-webkit-scrollbar{width:6px}.skc-msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.skc-row{display:flex;gap:9px;align-items:flex-end;max-width:100%}
.skc-row.skc-user{justify-content:flex-end}
.skc-av{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:rgba(168,252,216,.14);border:1px solid rgba(168,252,216,.28);display:flex;align-items:center;justify-content:center}
.skc-av svg{width:17px;height:17px}
.skc-bubble{padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.5;max-width:80%;color:#EAF1EE;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-bottom-left-radius:5px}
.skc-bubble a{color:#A8FCD8;text-decoration:underline}
.skc-ubub{background:#A8FCD8;color:#0C1830;border:0;border-radius:16px;border-bottom-right-radius:5px;font-weight:500}
.skc-dots{display:inline-flex;gap:4px;padding:2px 0}
.skc-dots i{width:7px;height:7px;border-radius:50%;background:rgba(168,252,216,.8);animation:skcBounce 1.2s infinite}
.skc-dots i:nth-child(2){animation-delay:.15s}.skc-dots i:nth-child(3){animation-delay:.3s}
@keyframes skcBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

.skc-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 2px 37px}
.skc-chip{background:rgba(168,252,216,.1);border:1px solid rgba(168,252,216,.35);color:#A8FCD8;font-family:var(--sans);font-size:13px;font-weight:600;padding:8px 13px;border-radius:100px;cursor:pointer;transition:background .2s,transform .2s}
.skc-chip:hover{background:rgba(168,252,216,.2);transform:translateY(-1px)}

.skc-form{width:100%;max-width:none;display:flex;flex-direction:column;gap:9px}
.skc-fh{font-size:13.5px;color:rgba(234,241,238,.85);margin-bottom:2px}
.skc-in{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:11px;padding:11px 13px;color:#EAF1EE;font-family:var(--sans);font-size:14px;outline:none;transition:border-color .2s}
.skc-in:focus{border-color:#A8FCD8}
.skc-in::placeholder{color:rgba(234,241,238,.45)}
.skc-ta{resize:none}
.skc-err{color:#ff9a9a;font-size:12.5px}
.skc-submit{margin-top:2px;background:#A8FCD8;color:#0C1830;border:0;border-radius:11px;padding:12px;font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s}
.skc-submit:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(168,252,216,.35)}
.skc-submit:disabled{opacity:.7;cursor:default;transform:none}
.skc-done{font-size:14px;line-height:1.55;color:#EAF1EE;display:flex;gap:10px;align-items:flex-start}
.skc-check{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}

.skc-input{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.1)}
.skc-input input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:11px 16px;color:#EAF1EE;font-family:var(--sans);font-size:14px;outline:none}
.skc-input input:focus{border-color:#A8FCD8}
.skc-input input::placeholder{color:rgba(234,241,238,.45)}
.skc-send{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:0;background:#A8FCD8;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.skc-send:hover{transform:scale(1.06)}
.skc-send svg{width:20px;height:20px}

@media (max-width:640px){
      .skc-panel{right:12px;left:12px;width:auto;max-width:none;bottom:84px;height:auto;top:70px;max-height:none}
}
/* Hide custom cursor override inside chat inputs for usability */
html.sk-cursor-on .skc-in, html.sk-cursor-on .skc-input input{cursor:auto !important}

/* ===== 35. Hero social chip (replaces the Live-on-iOS chip) ===== */
.sk-social-chip{gap:6px;padding:9px 11px;border-radius:100px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 14px 34px rgba(12,24,48,.14)}
.sk-social-chip .ic{width:34px;height:34px;flex:none;border-radius:50%;background:transparent;color:#0C1830;
  display:flex;align-items:center;justify-content:center;transition:background .28s cubic-bezier(.16,1,.3,1),color .28s ease,transform .28s cubic-bezier(.16,1,.3,1)}
.sk-social-chip .ic svg{width:17px;height:17px}
.sk-social-chip .ic:hover{background:#0C1830;color:#A8FCD8;transform:translateY(-3px) scale(1.06)}

/* ============================================================
   36. CUSTOMER CARE FAB — one circle, liquid-pop reveals chat + WhatsApp
   ============================================================ */
.skc-fab{position:fixed;right:24px;bottom:24px;z-index:93;display:flex;flex-direction:column;align-items:center;gap:14px}

.skc-care{position:relative;width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#A8FCD8,#7fe6c4);
  box-shadow:0 14px 34px rgba(168,252,216,.45),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.skc-care:hover{transform:scale(1.06);box-shadow:0 18px 42px rgba(168,252,216,.6)}
.skc-care svg{width:28px;height:28px}
.skc-care-ic,.skc-care-x{position:absolute;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.skc-care-x{opacity:0;transform:rotate(-90deg) scale(.6)}
.skc-fab.open .skc-care-ic{opacity:0;transform:rotate(90deg) scale(.6)}
.skc-fab.open .skc-care-x{opacity:1;transform:rotate(0) scale(1)}
/* liquid ripple burst on open */
.skc-care::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(168,252,216,.55);opacity:0;transform:scale(1);pointer-events:none}
.skc-fab.open .skc-care::after{animation:skcRipple .75s cubic-bezier(.22,1,.36,1)}
@keyframes skcRipple{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}
.skc-care .skc-badge{position:absolute;top:10px;right:10px;width:12px;height:12px;border-radius:50%;background:#25D366;border:2px solid #0b1322;animation:skcPulse 2s infinite}

.skc-mini{position:relative;width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.2) translateY(30px);pointer-events:none;
  transition:opacity .28s ease,transform .55s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-radius .55s cubic-bezier(.16,1,.3,1)}
.skc-fab.open .skc-mini{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}
.skc-fab.open .skc-mini-bot{transition-delay:.05s}
.skc-fab.open .skc-mini-wa{transition-delay:.12s}
.skc-mini:hover{transform:scale(1.1) translateY(-2px)}
.skc-mini svg{width:28px;height:28px}
.skc-mini-wa{background:#25D366;box-shadow:0 10px 26px rgba(37,211,102,.45)}
.skc-mini-bot{background:#0C1830;border:1px solid rgba(168,252,216,.4);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.skc-mini-bot svg{width:35px;height:35px}
.skc-tip{position:absolute;right:64px;top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;
  background:rgba(12,18,30,.92);color:#EAF1EE;font-family:var(--sans);font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:100px;
  border:1px solid rgba(255,255,255,.14);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.skc-mini:hover .skc-tip{opacity:1;transform:translateY(-50%) translateX(0)}

/* chat panel sits above the FAB */
.skc-panel{bottom:104px}
@media (max-width:640px){
  .skc-fab{right:16px;bottom:96px}
  .skc-care{width:58px;height:58px}
  .skc-mini{width:50px;height:50px}
  .skc-tip{display:none}
  .skc-panel{right:12px;left:12px;width:auto;max-width:none;bottom:170px;height:auto;top:70px;max-height:none}
}

/* ===== 37. Hero social row — integrated with the copy, not a floating sticker ===== */
.sk-hero-social{display:flex;align-items:center;gap:10px;margin-top:30px}
.sk-hero-social .ic{flex:none;width:54px;height:54px;touch-action:manipulation;border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(12,24,48,.58);
  transition:color .4s cubic-bezier(.16,1,.3,1),background .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1)}
.sk-hero-social .ic svg{width:27px;height:27px}
.sk-hero-social .ic:hover{color:#0C1830;background:rgba(12,24,48,.06);transform:translateY(-2px)}

/* ===== 38. Motion polish — smooth easeOutExpo, exit faster than enter, reduced-motion safe ===== */
.skc-mini{transition:opacity .34s cubic-bezier(.16,1,.3,1),transform .52s cubic-bezier(.16,1,.3,1),box-shadow .34s cubic-bezier(.16,1,.3,1)}
.skc-fab.open .skc-mini-bot{transition-delay:.04s}
.skc-fab.open .skc-mini-wa{transition-delay:.09s}
.skc-fab:not(.open) .skc-mini{transition-duration:.3s;transition-delay:0s}
.skc-care{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1)}
.skc-care-ic,.skc-care-x{transition:opacity .34s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.skc-fab.open .skc-care::after{animation:skcRipple .95s cubic-bezier(.16,1,.3,1)}
.skc-panel{transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .52s cubic-bezier(.16,1,.3,1)}
body:not(.skc-open) .skc-panel{transition-duration:.3s}
.skc-chip,.skc-submit,.skc-send,.sk-social-a{transition:all .4s cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .sk-ph-back,.sk-ph-front{animation:none !important;translate:none !important}
}

/* ===== 39. Liquid FAB — minis are extruded from the care button, not popped in ===== */
.skc-liquid{position:absolute;left:50%;bottom:16px;width:46px;height:46px;border-radius:100px;
  background:rgba(168,252,216,.55);filter:blur(11px);opacity:0;pointer-events:none;
  transform:translateX(-50%) scaleY(.2);transform-origin:bottom center}
.skc-fab.open .skc-liquid{animation:skcLiquid .9s cubic-bezier(.16,1,.3,1)}
@keyframes skcLiquid{
  0%{opacity:0;transform:translateX(-50%) scaleY(.2)}
  38%{opacity:.6;transform:translateX(-50%) scaleY(3.4)}
  100%{opacity:0;transform:translateX(-50%) scaleY(5)}
}
/* closed: sitting inside the care button, small and out of focus */
.skc-mini{filter:blur(7px);transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1),filter .5s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1)}
.skc-mini-bot{transform:translateY(73px) scale(.34)}
.skc-mini-wa{transform:translateY(141px) scale(.34)}
.skc-fab.open .skc-mini{transform:translateY(0) scale(1);filter:blur(0)}
.skc-fab.open .skc-mini-bot{transition-delay:.05s}
.skc-fab.open .skc-mini-wa{transition-delay:.11s}
.skc-fab:not(.open) .skc-mini{transition-duration:.34s;transition-delay:0s}
.skc-fab.open .skc-mini:hover{transform:translateY(-2px) scale(1.08)}
/* press feedback */
.skc-care,.skc-mini{touch-action:manipulation}
.skc-care:active{transform:scale(.94)}
.skc-fab.open .skc-care{border-radius:46%}

@media (max-width:640px){
  .skc-mini-bot{transform:translateY(68px) scale(.34)}
  .skc-mini-wa{transform:translateY(132px) scale(.34)}
}
@media (prefers-reduced-motion: reduce){
  .skc-mini{filter:none !important}
  .skc-liquid{display:none}
}

/* ===== 40. Assistant in Arabic — RTL inside the panel only ===== */
body.sk-ar-mode .skc-msgs,
body.sk-ar-mode .skc-head,
body.sk-ar-mode .skc-form{direction:rtl}
body.sk-ar-mode .skc-input input,
body.sk-ar-mode .skc-in{direction:rtl;text-align:right}
body.sk-ar-mode .skc-bubble{border-bottom-left-radius:16px;border-bottom-right-radius:5px}
body.sk-ar-mode .skc-ubub{border-bottom-right-radius:16px;border-bottom-left-radius:5px}
body.sk-ar-mode .skc-chips{padding:2px 37px 2px 0}
body.sk-ar-mode .skc-read,body.sk-ar-mode .blog-read{margin-left:0;margin-right:auto}

/* ============================================================
   41. MOBILE OPTIMISATION — phones & small tablets
   Grounded in the UX ruleset: 44px targets, safe areas, dvh,
   16px inputs, tap feedback, 150–300ms micro-motion.
   ============================================================ */

/* dvh accounts for the collapsing mobile browser chrome (100vh over-shoots) */
.skc-panel{max-height:calc(100dvh - 130px)}

/* ---- Foundations: phones & small tablets ---- */
@media (max-width:1024px){
  /* iOS zooms the page whenever a focused input is under 16px */
  input,textarea,select,.skc-in,.skc-input input{font-size:16px}

  /* nothing tappable hides behind the fixed dock / home indicator */
  body{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .sk-dock{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .skc-fab{bottom:calc(96px + env(safe-area-inset-bottom))}

  /* every control clears the 44px minimum */
  .lang-toggle{min-height:44px;padding:11px 16px;font-size:14px}
  .btn{min-height:46px}

  /* kill the 300ms tap delay */
  a,button,[role="button"],.btn,.skc-chip,.sk-dock-a,.sk-social-a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

  /* adaptive gutters */
  .container{padding-left:20px;padding-right:20px}
}

/* ---- Phones ---- */
@media (max-width:640px){
  .blog-hero,.blog-wrap,.post-single{padding-left:20px;padding-right:20px}

  /* assistant: full-height sheet, safe-area aware, comfortable targets */
  .skc-panel{
    top:calc(env(safe-area-inset-top) + 62px);
    bottom:calc(96px + env(safe-area-inset-bottom));
    left:10px;right:10px;width:auto;max-width:none;height:auto;max-height:none;border-radius:20px}
  .skc-msgs{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .skc-chip{min-height:44px;padding:11px 16px;font-size:14px}
  .skc-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0}
  .skc-send{width:48px;height:48px;flex:0 0 48px}
  .skc-submit{min-height:48px}

  /* social row must fit a 320px screen without wrapping */
  .sk-hero-social{gap:6px;margin-top:22px}
  .sk-hero-social .ic{width:46px;height:46px}
  .sk-hero-social .ic svg{width:22px;height:22px}

  /* micro-interactions land in the 150–300ms band on phones */
  .btn,.skc-chip,.sk-dock-a,.sk-social-a,.sk-hero-social .ic{transition-duration:.22s}
  /* shorter reveal travel reads as a fade, not a slide, on a small screen */
  [data-reveal]:not([data-sk-in]){transform:translateY(18px)}

  /* lighter glass — heavy blur is the main scroll cost on mid-tier phones */
  .sk-dock,.skc-panel{-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
}

@media (max-width:380px){
  .sk-hero-social{gap:4px}
  .sk-hero-social .ic{width:44px;height:44px}
  .sk-hero-social .ic svg{width:20px;height:20px}
  .sk-dock{gap:2px}
  .sk-dock-a{width:44px;height:44px}
}

/* ---- Touch feedback: opacity/scale only, never layout-shifting ---- */
@media (hover:none){
  .btn:active,.skc-chip:active,.sk-dock-a:active,.sk-social-a:active,
  .sk-hero-social .ic:active,.skc-care:active,.skc-mini:active,
  .mod-row:active,.sk-modrow:active{transform:scale(.96);opacity:.9}
  .blog-row:active,.blog-featured:active{opacity:.92}
  /* hover-only affordances must never strand content on touch */
  .blog-row-more{max-height:240px;opacity:1;transform:none}
}

/* ---- Landscape phones: keep the sheet usable ---- */
@media (max-height:520px) and (orientation:landscape){
  .skc-panel{top:8px;bottom:8px;left:auto;right:12px;width:min(420px,60vw)}
  .sk-dock{bottom:8px}
}

/* ============================================================
   42. CINEMATIC BACKDROP — video at the top, dissolving into the
   reactive field. Video sits at z-index -3, the particle canvas and
   aurora ride above it at -1, so the background still reacts.
   ============================================================ */
/* Container is STATIC (no transform) so its edges never move — kills the scroll seam.
   The video overscans (top:-11% / height:122%) and is the element that parallaxes,
   clipped by overflow:hidden, so no edge is ever revealed. */
.sk-videobg{position:absolute;top:0;left:0;right:0;z-index:-3;overflow:hidden;pointer-events:none;
  height:clamp(720px,104vh,1320px);background:#0b1322}
.sk-videobg-v{position:absolute;top:-11%;left:0;width:100%;height:122%;object-fit:cover;opacity:.96;filter:saturate(1.16) contrast(1.08) brightness(1.04);will-change:transform}
/* readability scrim: darkens only behind the headline, edges stay bright */
.sk-videobg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(108% 74% at 28% 44%, rgba(11,19,34,.70) 0%, rgba(11,19,34,.42) 44%, rgba(11,19,34,0) 78%)}
/* the dissolve: crisp at the top, fully navy by the time content starts */
.sk-videobg::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,
    rgba(11,19,34,0) 0%,
    rgba(11,19,34,0) 14%,
    rgba(11,19,34,.04) 30%,
    rgba(11,19,34,.30) 52%,
    rgba(11,19,34,.66) 68%,
    rgba(11,19,34,.90) 80%,
    #0b1322 88%)}

@media (max-width:820px){
  .sk-videobg{height:clamp(520px,80vh,900px)}
  .sk-videobg-v{opacity:.9}
}
@media (prefers-reduced-motion: reduce){ .sk-videobg-v{display:none} }

/* ============================================================
   43. APP-LIKE MOBILE CHROME — header retracts on scroll like a
   native app, dock stays put as the persistent tab bar.
   ============================================================ */
@media (max-width:1024px){
  .site-header{transition:transform .42s cubic-bezier(.16,1,.3,1),background .3s ease;will-change:transform}
  body.sk-hd-hide .site-header{transform:translateY(-118%)}
  /* tab bar reads as chrome, not page content */
  .sk-dock{gap:4px}
  .sk-dock-a{transition:background .28s cubic-bezier(.16,1,.3,1),color .28s ease,transform .22s cubic-bezier(.16,1,.3,1)}
}

/* ============================================================
   44. MOBILE POLISH — thinner phone bezels + Real-Communities restructure
   ============================================================ */
@media (max-width:640px){
  /* Hero phones: real-device bezel proportions (was a chunky 7–8px frame at 128px wide) */
  .sk-ph-back{width:150px !important;padding:4px !important;border-radius:26px}
  .sk-ph-front{width:172px !important;margin-left:-20px !important;padding:4px !important;border-radius:30px}
  .sk-ph-back img{border-radius:22px}
  .sk-ph-front img{border-radius:26px}

  /* Real communities: banner image on top, clean dark card with a tidy 3-stat row below
     (the overlaid tall content read as a broken vertical stack over a bright photo) */
  .sk-rc{min-height:0 !important;display:flex !important;flex-direction:column;border-radius:24px !important;background:#0b1322}
  .sk-rc-img{position:relative !important;height:200px !important;inset:auto !important}
  .sk-rc-ov{height:200px !important;top:0 !important;bottom:auto !important;
    background:linear-gradient(180deg,rgba(7,11,18,.1) 0%,rgba(7,11,18,.35) 55%,#0b1322 100%) !important}
  .sk-rc-body{position:relative;z-index:2;padding:8px 22px 28px !important;background:#0b1322;
    justify-content:flex-start !important;height:auto !important;min-height:0 !important}
  .sk-rc-body h2{font-size:30px !important}
  .sk-rc-body p{font-size:15.5px !important}
  .sk-rc-stats{display:flex !important;flex-wrap:nowrap !important;gap:14px !important;margin-top:24px !important}
  .sk-rc-stats > div{flex:1 1 0 !important;min-width:0}
  .sk-rc-stats p:first-child{font-size:30px !important}
  .sk-rc-stats p:last-child{font-size:12px !important}
}
@media (max-width:360px){
  .sk-rc-stats{gap:10px !important}
  .sk-rc-stats p:last-child{font-size:11px !important}
}

/* ============================================================
   v4.0.0 — cookie consent + chatbot country-code / feedback
   ============================================================ */
.skc-phone-row{display:flex;gap:8px;align-items:stretch}
.skc-cc{flex:0 0 116px;max-width:116px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:11px;color:#EAF1EE;font-family:var(--sans);font-size:13.5px;padding:0 8px;height:40px;outline:none;cursor:pointer}
.skc-cc:focus{border-color:rgba(120,240,190,.55)}
.skc-cc option{background:#0C1830;color:#EAF1EE}
.skc-phone{flex:1 1 auto;min-width:0}
.skc-fb-thx{display:inline-block;font-size:13px;color:#9BF3CE;padding:4px 2px}
body.sk-ar-mode .skc-phone-row{flex-direction:row-reverse}

/* Cookie consent */
.sk-cookie{position:fixed;left:50%;bottom:20px;transform:translate(-50%,140%);z-index:99997;
  width:min(680px,calc(100vw - 28px));opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s ease;pointer-events:none}
.sk-cookie.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.sk-cookie-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;
  padding:16px 18px;border-radius:18px;background:rgba(15,23,40,.72);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.sk-cookie-txt{margin:0;flex:1 1 260px;font-size:13.5px;line-height:1.55;color:#DCE7E3;font-family:var(--sans)}
.sk-cookie-link{color:#8FE9C4;text-decoration:underline;white-space:nowrap}
.sk-cookie-btns{display:flex;gap:10px;flex:0 0 auto}
.sk-cookie-b{font-family:var(--sans);font-size:13.5px;font-weight:600;border-radius:11px;padding:10px 16px;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s ease,border-color .25s ease}
.sk-cookie-b:hover{transform:translateY(-1px)}
.sk-cookie-ess{background:transparent;color:#EAF1EE}
.sk-cookie-ess:hover{background:rgba(255,255,255,.08)}
.sk-cookie-all{background:linear-gradient(135deg,#8CF0C0,#57D6A6);color:#08251A;border-color:transparent}
.sk-cookie-all:hover{box-shadow:0 8px 24px rgba(87,214,166,.34)}
.sk-cookie-ar{direction:rtl}
@media (max-width:520px){
  .sk-cookie{bottom:14px}
  .sk-cookie-in{padding:14px 15px;gap:12px}
  .sk-cookie-btns{width:100%}
  .sk-cookie-b{flex:1}
}

/* v4.0.7 — chatbot consent microcopy (GDPR notice under the lead form) */
.skc-consent{margin-top:9px;font-size:11px;line-height:1.5;color:rgba(234,241,238,.5);text-align:center}
.skc-consent a{color:rgba(155,243,206,.85);text-decoration:underline}

/* v4.0.8 — chatbot 1–5 experience rating (circular number buttons) */
.skc-rating{gap:8px}
.skc-rating .skc-chip{width:40px;height:40px;min-width:40px;padding:0;border-radius:50%;
  justify-content:center;font-weight:700;font-size:15px;line-height:1}
.skc-rating .skc-chip:hover{background:rgba(168,252,216,.16);border-color:rgba(168,252,216,.5);color:#A8FCD8}