/*
Theme Name: SysNet Tech
Theme URI: https://sysnet-et.com
Author: SysNet Technologies PLC
Description: Custom WordPress theme for SysNet Technologies PLC — Systems & Networking, done with excellence. Blue (#0f70b7) and white corporate tech theme with shop, accounts, and front-end login.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: sysnet
*/

/* =============================================================
   HOW TO EDIT THIS FILE (quick guide)
   -------------------------------------------------------------
   • Brand colors live in :root below — change once, applies everywhere.
   • Most content (phone, email, address, hero text, payment info)
     is edited in  Appearance → Customize , NOT in code.
   • Sections are labelled with big banner comments — scroll or
     Ctrl+F for e.g. "SHOP", "HERO", "FOOTER".
   ============================================================= */

/* ============ 1. DESIGN TOKENS ============ */
:root{
  --sn-blue:        #0f70b7;   /* primary brand blue  */
  --sn-blue-dark:   #0a5490;   /* hover / darker blue */
  --sn-navy:        #062b47;   /* deep navy — hero & footer background */
  --sn-navy-2:      #083a5e;   /* navy gradient partner */
  --sn-sky:         #e9f3fb;   /* pale blue tint background */
  --sn-cyan:        #38b6ff;   /* glow / accent lines on dark surfaces */
  --sn-white:       #ffffff;
  --sn-ink:         #12222f;   /* body text on white */
  --sn-mist:        #5b7386;   /* muted text */
  --sn-line:        #d7e6f2;   /* hairline borders */
  --sn-ok:          #1a9e6c;
  --sn-warn:        #c0392b;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(6,43,71,.10);
  --shadow-lg: 0 22px 60px rgba(6,43,71,.16);
  --maxw: 1180px;
  --header-h: 76px;
}

/* ============ 2. RESET / BASE ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.7;
  color:var(--sn-ink);
  background:var(--sn-white);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--sn-blue); text-decoration:none; }
a:hover{ color:var(--sn-blue-dark); }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.18; color:var(--sn-navy); margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size:clamp(2rem, 4.6vw, 3.4rem); }
h2{ font-size:clamp(1.6rem, 3vw, 2.3rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; }
:focus-visible{ outline:3px solid var(--sn-cyan); outline-offset:2px; border-radius:4px; }

.sn-container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.sn-section{ padding:84px 0; }
.sn-section--sky{ background:var(--sn-sky); }
.sn-section--navy{ background:linear-gradient(150deg, var(--sn-navy), var(--sn-navy-2)); color:#dcecf8; }
.sn-section--navy h2, .sn-section--navy h3{ color:#fff; }

/* Eyebrow label above section titles */
.sn-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:.78rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--sn-blue);
  margin-bottom:14px;
}
.sn-eyebrow::before{ content:""; width:34px; height:2px; background:var(--sn-blue); }
.sn-section--navy .sn-eyebrow{ color:var(--sn-cyan); }
.sn-section--navy .sn-eyebrow::before{ background:var(--sn-cyan); }

.sn-lede{ max-width:640px; color:var(--sn-mist); font-size:1.06rem; }
.sn-section--navy .sn-lede{ color:#b9d3e6; }

/* ============ 3. BUTTONS ============ */
.sn-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:999px; border:2px solid transparent;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.sn-btn--primary{ background:var(--sn-blue); color:#fff; box-shadow:0 8px 20px rgba(15,112,183,.35); }
.sn-btn--primary:hover{ background:var(--sn-blue-dark); color:#fff; transform:translateY(-2px); }
.sn-btn--ghost{ background:transparent; color:var(--sn-blue); border-color:var(--sn-blue); }
.sn-btn--ghost:hover{ background:var(--sn-sky); }
.sn-btn--light{ background:#fff; color:var(--sn-navy); }
.sn-btn--light:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.sn-btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* ============ 4. HEADER / NAVIGATION ============ */
.sn-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--sn-line);
}
body.admin-bar .sn-header{ top:32px; }
@media (max-width:782px){ body.admin-bar .sn-header{ top:46px; } }
.sn-header__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 24px;
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.sn-logo{ display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--sn-navy); }
.sn-logo:hover{ color:var(--sn-blue); }
.sn-logo__mark{ width:40px; height:40px; flex:0 0 40px; }
.sn-logo small{ display:block; font-size:.62rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--sn-blue); }

.sn-nav ul{ list-style:none; display:flex; gap:6px; margin:0; padding:0; }
.sn-nav a{
  display:block; padding:10px 14px; border-radius:10px;
  font-family:var(--font-display); font-weight:500; font-size:.95rem; color:var(--sn-navy);
}
.sn-nav a:hover, .sn-nav .current-menu-item > a{ color:var(--sn-blue); background:var(--sn-sky); }

.sn-header__actions{ display:flex; align-items:center; gap:10px; }
.sn-cart-link{ position:relative; display:inline-flex; padding:9px; border-radius:10px; color:var(--sn-navy); }
.sn-cart-link:hover{ background:var(--sn-sky); }
.sn-cart-count{
  position:absolute; top:2px; right:0; min-width:18px; height:18px; padding:0 4px;
  background:var(--sn-blue); color:#fff; border-radius:999px;
  font-size:.68rem; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.sn-nav-toggle{ display:none; background:none; border:0; padding:10px; cursor:pointer; color:var(--sn-navy); }

@media (max-width:920px){
  .sn-nav-toggle{ display:block; }
  .sn-nav{
    position:fixed; inset:var(--header-h) 0 0 0; background:#fff;
    padding:24px; transform:translateX(100%); transition:transform .25s ease; overflow:auto;
  }
  .sn-nav.is-open{ transform:none; }
  .sn-nav ul{ flex-direction:column; }
  .sn-nav a{ font-size:1.15rem; padding:14px; }
}

/* ============ 5. HERO (front page) ============ */
.sn-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(140deg, var(--sn-navy) 0%, var(--sn-navy-2) 55%, var(--sn-blue) 130%);
  color:#fff;
}
.sn-hero__inner{
  max-width:var(--maxw); margin:0 auto; padding:110px 24px 130px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  position:relative; z-index:2;
}
.sn-hero__kicker{
  display:inline-flex; align-items:center; gap:10px; padding:8px 18px;
  border:1px solid rgba(56,182,255,.4); border-radius:999px;
  font-family:var(--font-display); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sn-cyan);
  margin-bottom:22px;
}
.sn-hero__kicker::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--sn-cyan); box-shadow:0 0 12px var(--sn-cyan); }
.sn-hero h1{ color:#fff; margin-bottom:18px; }
.sn-hero h1 em{ font-style:normal; color:var(--sn-cyan); }
.sn-hero p{ color:#c4dcee; max-width:520px; font-size:1.1rem; }
.sn-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }

/* The signature: live network-node canvas drawn by an inline SVG.
   Node pulses are pure CSS so they cost nothing. */
.sn-hero__net{ position:relative; }
.sn-hero__net svg{ width:100%; height:auto; }
.sn-net-line{ stroke:rgba(56,182,255,.35); stroke-width:1.2; }
.sn-net-line--strong{ stroke:rgba(56,182,255,.7); stroke-width:1.6; }
.sn-net-node{ fill:#fff; }
.sn-net-node--hub{ fill:var(--sn-cyan); }
.sn-net-pulse{ fill:none; stroke:var(--sn-cyan); stroke-width:1.5; opacity:0; transform-origin:center; animation:snPulse 3.6s ease-out infinite; }
.sn-net-pulse:nth-of-type(2){ animation-delay:1.2s; }
.sn-net-pulse:nth-of-type(3){ animation-delay:2.4s; }
@keyframes snPulse{
  0%{ opacity:.8; transform:scale(.2); }
  70%{ opacity:0; transform:scale(1.6); }
  100%{ opacity:0; transform:scale(1.6); }
}
.sn-hero__grid{ /* faint blueprint grid behind everything */
  position:absolute; inset:0; opacity:.35; z-index:1;
  background-image:
    linear-gradient(rgba(56,182,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,182,255,.07) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 30% 40%, #000 0%, transparent 75%);
}
@media (max-width:920px){
  .sn-hero__inner{ grid-template-columns:1fr; padding:80px 24px 90px; }
  .sn-hero__net{ max-width:460px; }
}

/* Hero pillar chips (Computing / Networking / Solutions / Sales) */
.sn-pillars{
  max-width:var(--maxw); margin:-64px auto 0; padding:0 24px 40px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative; z-index:5;
}
.sn-pillar{
  background:#fff; border-radius:var(--radius); padding:26px 24px;
  box-shadow:var(--shadow); border-top:3px solid var(--sn-blue);
  transition:transform .2s ease, box-shadow .2s ease;
}
.sn-pillar:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.sn-pillar__icon{ width:44px; height:44px; margin-bottom:14px; color:var(--sn-blue); }
.sn-pillar h3{ margin-bottom:6px; font-size:1.1rem; }
.sn-pillar p{ color:var(--sn-mist); font-size:.92rem; margin-bottom:10px; }
.sn-pillar a{ font-family:var(--font-display); font-weight:600; font-size:.9rem; }
@media (max-width:920px){ .sn-pillars{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .sn-pillars{ grid-template-columns:1fr; margin-top:-40px; } }

/* ============ 6. GENERIC CARDS / GRIDS ============ */
.sn-grid{ display:grid; gap:24px; }
.sn-grid--2{ grid-template-columns:repeat(2,1fr); }
.sn-grid--3{ grid-template-columns:repeat(3,1fr); }
.sn-grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:920px){ .sn-grid--3, .sn-grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .sn-grid--2, .sn-grid--3, .sn-grid--4{ grid-template-columns:1fr; } }

.sn-card{
  background:#fff; border:1px solid var(--sn-line); border-radius:var(--radius);
  padding:30px 28px; transition:transform .2s ease, box-shadow .2s ease;
  position:relative; overflow:hidden;
}
.sn-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.sn-card__icon{ width:48px; height:48px; color:var(--sn-blue); margin-bottom:16px; }
.sn-card p{ color:var(--sn-mist); font-size:.95rem; }
/* circuit corner accent */
.sn-card::after{
  content:""; position:absolute; top:0; right:0; width:74px; height:74px; opacity:.5;
  background:
    linear-gradient(var(--sn-line),var(--sn-line)) 100% 26px/40px 1px no-repeat,
    linear-gradient(var(--sn-line),var(--sn-line)) calc(100% - 26px) 0/1px 40px no-repeat,
    radial-gradient(circle at calc(100% - 26px) 26px, var(--sn-blue) 2.5px, transparent 3px);
}

/* ============ 7. STATS / COUNTERS ============ */
.sn-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
@media (max-width:760px){ .sn-stats{ grid-template-columns:repeat(2,1fr); } }
.sn-stat{ padding:34px 12px; border:1px solid rgba(56,182,255,.25); border-radius:var(--radius); background:rgba(255,255,255,.04); }
.sn-stat__num{ font-family:var(--font-display); font-size:2.6rem; font-weight:700; color:#fff; }
.sn-stat__num span{ color:var(--sn-cyan); }
.sn-stat__label{ color:#a9c8de; font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; }

/* ============ 8. MANAGEMENT / TESTIMONIALS ============ */
.sn-person{ text-align:center; }
.sn-person__photo{
  width:132px; height:132px; margin:0 auto 16px; border-radius:50%;
  overflow:hidden; border:3px solid var(--sn-blue); background:var(--sn-sky);
  display:flex; align-items:center; justify-content:center; color:var(--sn-blue);
}
.sn-person__photo img{ width:100%; height:100%; object-fit:cover; }
.sn-person h3{ margin-bottom:2px; }
.sn-person__role{ color:var(--sn-blue); font-size:.88rem; font-weight:600; letter-spacing:.04em; }
.sn-person__quote{ color:var(--sn-mist); font-size:.94rem; margin-top:10px; }

.sn-quote{
  background:#fff; border-radius:var(--radius); padding:30px; box-shadow:var(--shadow);
  border-left:4px solid var(--sn-blue);
}
.sn-quote p{ font-size:1rem; color:var(--sn-ink); }
.sn-quote footer{ font-family:var(--font-display); font-weight:600; color:var(--sn-blue); }

/* ============ 9. SHOP ============ */
.sn-shop-toolbar{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  margin-bottom:34px; padding:18px; background:#fff; border:1px solid var(--sn-line); border-radius:var(--radius);
}
.sn-shop-toolbar input[type=search], .sn-shop-toolbar select{
  padding:12px 16px; border:1px solid var(--sn-line); border-radius:10px;
  font:inherit; color:var(--sn-ink); background:#fff;
}
.sn-shop-toolbar input[type=search]{ flex:1 1 220px; }
.sn-filter-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.sn-chip{
  padding:8px 18px; border-radius:999px; border:1.5px solid var(--sn-line);
  background:#fff; font-family:var(--font-display); font-weight:500; font-size:.88rem;
  color:var(--sn-navy); cursor:pointer; transition:all .15s ease;
}
.sn-chip:hover{ border-color:var(--sn-blue); color:var(--sn-blue); }
.sn-chip.is-active{ background:var(--sn-blue); border-color:var(--sn-blue); color:#fff; }

.sn-product{
  background:#fff; border:1px solid var(--sn-line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.sn-product:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.sn-product__media{ aspect-ratio:4/3; background:var(--sn-sky); display:flex; align-items:center; justify-content:center; color:var(--sn-blue); position:relative; }
.sn-product__media img{ width:100%; height:100%; object-fit:cover; }
.sn-product__cat{
  position:absolute; top:12px; left:12px; padding:4px 12px; border-radius:999px;
  background:rgba(255,255,255,.92); color:var(--sn-blue);
  font-family:var(--font-display); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.sn-product__body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.sn-product__body h3{ font-size:1.05rem; margin:0; }
.sn-product__desc{ color:var(--sn-mist); font-size:.88rem; flex:1; }
.sn-product__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.sn-price{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:var(--sn-blue); }
.sn-price small{ font-size:.72rem; font-weight:500; color:var(--sn-mist); }
.sn-add-btn{
  padding:10px 18px; border-radius:10px; border:0; cursor:pointer;
  background:var(--sn-blue); color:#fff; font-family:var(--font-display); font-weight:600; font-size:.86rem;
  transition:background .15s ease;
}
.sn-add-btn:hover{ background:var(--sn-blue-dark); }
.sn-add-btn.is-added{ background:var(--sn-ok); }
.sn-shop-empty{ text-align:center; color:var(--sn-mist); padding:60px 0; display:none; }

/* ============ 10. CART / CHECKOUT ============ */
.sn-cart-table{ width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.sn-cart-table th, .sn-cart-table td{ padding:16px 18px; text-align:left; border-bottom:1px solid var(--sn-line); }
.sn-cart-table th{ background:var(--sn-sky); font-family:var(--font-display); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sn-navy); }
.sn-qty{ display:inline-flex; align-items:center; gap:8px; }
.sn-qty button{ width:30px; height:30px; border-radius:8px; border:1px solid var(--sn-line); background:#fff; cursor:pointer; font-weight:700; color:var(--sn-blue); }
.sn-cart-total{ text-align:right; font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--sn-navy); margin:22px 0; }
.sn-remove{ background:none; border:0; color:var(--sn-warn); cursor:pointer; font-size:.85rem; }

.sn-paybox{ display:grid; gap:12px; margin:18px 0; }
.sn-payopt{
  display:flex; gap:14px; align-items:flex-start; padding:16px 18px;
  border:1.5px solid var(--sn-line); border-radius:12px; cursor:pointer; background:#fff;
  transition:border-color .15s ease;
}
.sn-payopt:hover{ border-color:var(--sn-blue); }
.sn-payopt input{ margin-top:5px; accent-color:var(--sn-blue); }
.sn-payopt strong{ font-family:var(--font-display); color:var(--sn-navy); display:block; }
.sn-payopt small{ color:var(--sn-mist); }

/* ============ 11. FORMS (contact / login / membership) ============ */
.sn-form{ display:grid; gap:16px; }
.sn-form label{ font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--sn-navy); display:block; margin-bottom:6px; }
.sn-form input[type=text], .sn-form input[type=email], .sn-form input[type=password],
.sn-form input[type=tel], .sn-form input[type=number], .sn-form select, .sn-form textarea{
  width:100%; padding:13px 16px; border:1.5px solid var(--sn-line); border-radius:10px;
  font:inherit; color:var(--sn-ink); background:#fff; transition:border-color .15s ease;
}
.sn-form input:focus, .sn-form textarea:focus, .sn-form select:focus{ border-color:var(--sn-blue); outline:none; }
.sn-form .is-invalid{ border-color:var(--sn-warn) !important; }
.sn-field-error{ color:var(--sn-warn); font-size:.82rem; margin-top:4px; display:none; }
.sn-field-error.is-visible{ display:block; }
.sn-notice{ padding:14px 18px; border-radius:10px; font-size:.95rem; margin-bottom:18px; }
.sn-notice--ok{ background:#e5f6ef; color:#116a48; border:1px solid #b7e4d1; }
.sn-notice--err{ background:#fdebe9; color:#8f2317; border:1px solid #f3c1bb; }
.sn-hp{ position:absolute !important; left:-9999px; } /* honeypot anti-spam field */

/* Auth card (login / register) */
.sn-auth{ min-height:calc(100vh - var(--header-h)); display:flex; align-items:center; background:linear-gradient(140deg,var(--sn-navy),var(--sn-navy-2)); padding:60px 0; }
.sn-auth__card{
  width:min(440px, 92vw); margin:0 auto; background:#fff; border-radius:20px;
  padding:40px 38px; box-shadow:var(--shadow-lg);
}
.sn-auth__tabs{ display:flex; gap:6px; margin-bottom:26px; background:var(--sn-sky); padding:6px; border-radius:12px; }
.sn-auth__tab{ flex:1; text-align:center; padding:10px; border-radius:9px; border:0; background:none; cursor:pointer; font-family:var(--font-display); font-weight:600; color:var(--sn-mist); }
.sn-auth__tab.is-active{ background:#fff; color:var(--sn-blue); box-shadow:0 3px 10px rgba(6,43,71,.1); }

/* ============ 12. PAGE HEADER (interior pages) ============ */
.sn-pagehead{
  background:linear-gradient(140deg,var(--sn-navy),var(--sn-navy-2));
  color:#fff; padding:74px 0 66px; position:relative; overflow:hidden;
}
.sn-pagehead h1{ color:#fff; margin:0; }
.sn-pagehead p{ color:#b9d3e6; margin:10px 0 0; max-width:640px; }
.sn-pagehead::after{
  content:""; position:absolute; inset:0; opacity:.4;
  background-image:
    linear-gradient(rgba(56,182,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,182,255,.08) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 80% 20%, #000, transparent 70%);
}
.sn-pagehead .sn-container{ position:relative; z-index:2; }

/* ============ 13. ABOUT PAGE ============ */
.sn-mvv{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:860px){ .sn-mvv{ grid-template-columns:1fr; } }
.sn-values-list{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.sn-values-list li{ display:flex; gap:14px; align-items:flex-start; }
.sn-values-list li::before{
  content:"▸"; color:var(--sn-blue); font-weight:700; flex:0 0 auto; margin-top:2px;
}
.sn-values-list strong{ color:var(--sn-navy); }

/* ============ 14. CONTACT ============ */
.sn-contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:40px; align-items:start; }
@media (max-width:860px){ .sn-contact-grid{ grid-template-columns:1fr; } }
.sn-contact-item{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--sn-line); }
.sn-contact-item svg{ flex:0 0 26px; color:var(--sn-blue); margin-top:3px; }
.sn-contact-item strong{ font-family:var(--font-display); color:var(--sn-navy); display:block; }
.sn-contact-item span{ color:var(--sn-mist); }

/* ============ 15. FOOTER ============ */
.sn-footer{ background:var(--sn-navy); color:#a9c8de; padding:70px 0 0; }
.sn-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:50px; }
@media (max-width:860px){ .sn-footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .sn-footer__grid{ grid-template-columns:1fr; } }
.sn-footer h4{ color:#fff; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px; }
.sn-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.sn-footer a{ color:#a9c8de; }
.sn-footer a:hover{ color:var(--sn-cyan); }
.sn-footer p{ font-size:.94rem; }
.sn-footer__news input{ width:100%; padding:12px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; font:inherit; margin-bottom:10px; }
.sn-footer__news input::placeholder{ color:#7fa3bd; }
.sn-footer__bar{
  border-top:1px solid rgba(255,255,255,.12); padding:22px 0; font-size:.86rem;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

/* ============ 16. ACCOUNT / DASHBOARD ============ */
.sn-dash{ display:grid; grid-template-columns:240px 1fr; gap:30px; align-items:start; }
@media (max-width:820px){ .sn-dash{ grid-template-columns:1fr; } }
.sn-dash__nav{ background:#fff; border:1px solid var(--sn-line); border-radius:var(--radius); overflow:hidden; }
.sn-dash__nav a{ display:block; padding:14px 20px; border-bottom:1px solid var(--sn-line); font-family:var(--font-display); font-weight:500; color:var(--sn-navy); }
.sn-dash__nav a:last-child{ border-bottom:0; }
.sn-dash__nav a:hover{ background:var(--sn-sky); color:var(--sn-blue); }
.sn-order-badge{ display:inline-block; padding:3px 12px; border-radius:999px; font-size:.76rem; font-weight:700; font-family:var(--font-display); }
.sn-order-badge--pending{ background:#fff4dd; color:#9a6a00; }
.sn-order-badge--paid{ background:#e5f6ef; color:#116a48; }
.sn-order-badge--completed{ background:var(--sn-sky); color:var(--sn-blue); }
.sn-order-badge--cancelled{ background:#fdebe9; color:#8f2317; }

/* ============ 17. NEWS / ARTICLES ============ */
.sn-post-card{ background:#fff; border:1px solid var(--sn-line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; }
.sn-post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.sn-post-card__media{ aspect-ratio:16/9; background:var(--sn-sky); display:flex; align-items:center; justify-content:center; color:var(--sn-blue); }
.sn-post-card__media img{ width:100%; height:100%; object-fit:cover; }
.sn-post-card__body{ padding:22px 24px 26px; }
.sn-post-card__meta{ font-size:.8rem; color:var(--sn-mist); letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px; font-family:var(--font-display); }

.sn-prose{ max-width:760px; }
.sn-prose img{ border-radius:var(--radius); }
.sn-prose h2{ margin-top:1.4em; }

/* ============ 18. UTILITIES ============ */
.sn-center{ text-align:center; }
.sn-mt-0{ margin-top:0; } .sn-mb-0{ margin-bottom:0; }
.sn-reveal{ opacity:0; transform:translateY(22px); transition:opacity .55s ease, transform .55s ease; }
.sn-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .sn-reveal{ opacity:1; transform:none; } }
.screen-reader-text{ clip:rect(1px,1px,1px,1px); position:absolute !important; height:1px; width:1px; overflow:hidden; word-wrap:normal !important; }

/* =============================================================
   11. VISUAL UPGRADE PACK  (elegance + interactivity + imagery)
   Added on top of the base styles above. New classes only, plus a
   few enhancements to existing sections. Safe to tweak freely.
   ============================================================= */

/* ---- 11.1 Ambient gradient blobs + smoother section rhythm ---- */
.sn-section{ position:relative; }
.sn-blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; z-index:0; pointer-events:none; }
.sn-blob--blue{ background:radial-gradient(circle, rgba(15,112,183,.28), transparent 70%); }
.sn-blob--cyan{ background:radial-gradient(circle, rgba(56,182,255,.22), transparent 70%); }
.sn-section > .sn-container{ position:relative; z-index:1; }

/* ---- 11.2 HERO: real photograph behind the glass ---- */
.sn-hero__photo{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:.30; filter:saturate(1.05);
  mask-image:linear-gradient(90deg, transparent 0%, #000 45%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 45%);
}
.sn-hero::after{ /* deep colour wash so text stays crisp over the photo */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(140deg, rgba(6,43,71,.86) 0%, rgba(8,58,94,.72) 45%, rgba(15,112,183,.42) 130%);
}
.sn-hero__inner{ z-index:2; }
.sn-hero__net{
  background:rgba(255,255,255,.04); border:1px solid rgba(56,182,255,.22);
  border-radius:22px; padding:22px; backdrop-filter:blur(6px);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.sn-hero__net::before{
  content:"● LIVE NETWORK"; position:absolute; top:16px; left:24px;
  font-family:var(--font-display); font-size:.62rem; letter-spacing:.24em;
  color:var(--sn-cyan); opacity:.9;
}
/* animated data pulses travelling along the hero lines */
.sn-net-line{ stroke-dasharray:5 7; animation:snDash 5s linear infinite; }
@keyframes snDash{ to{ stroke-dashoffset:-120; } }
/* gentle float for the whole node panel */
@media (prefers-reduced-motion:no-preference){
  .sn-hero__net{ animation:snFloat 7s ease-in-out infinite; }
  @keyframes snFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
}

/* ---- 11.3 BUTTONS: subtle sheen + gradient primary ---- */
.sn-btn--primary{
  background:linear-gradient(120deg, var(--sn-blue), #1288d6);
  position:relative; overflow:hidden;
}
.sn-btn--primary::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transition:left .6s ease;
}
.sn-btn--primary:hover::after{ left:130%; }
.sn-btn--light{ box-shadow:0 8px 20px rgba(0,0,0,.18); }

/* ---- 11.4 IMAGE SPLIT SECTIONS ---- */
.sn-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.sn-split--flip .sn-split__media{ order:2; }
@media (max-width:900px){ .sn-split{ grid-template-columns:1fr; gap:34px; } .sn-split--flip .sn-split__media{ order:0; } }

.sn-media{
  position:relative; border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow-lg); isolation:isolate;
}
.sn-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.sn-media:hover img{ transform:scale(1.06); }
.sn-media::after{ /* brand glaze */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent 40%, rgba(6,43,71,.30));
  mix-blend-mode:multiply;
}
.sn-media__ring{ /* thin cyan frame */
  content:""; position:absolute; inset:10px; z-index:2; pointer-events:none;
  border:1px solid rgba(255,255,255,.35); border-radius:12px;
}
/* floating glass badge on an image */
.sn-media__badge{
  position:absolute; z-index:3; left:18px; bottom:18px;
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border-radius:14px; padding:12px 16px; box-shadow:var(--shadow);
}
.sn-media__badge svg{ width:26px; height:26px; color:var(--sn-blue); }
.sn-media__badge strong{ font-family:var(--font-display); color:var(--sn-navy); display:block; font-size:1.05rem; line-height:1; }
.sn-media__badge span{ font-size:.78rem; color:var(--sn-mist); }
/* decorative dotted panel behind an image */
.sn-media--framed{ margin:18px; }
.sn-media--framed::before{
  content:""; position:absolute; inset:-18px -18px auto auto; width:60%; height:60%; z-index:-1;
  background-image:radial-gradient(var(--sn-line) 1.4px, transparent 1.5px); background-size:16px 16px;
  border-radius:16px;
}

/* ---- 11.5 PARTNERS MARQUEE ---- */
.sn-partners{ padding:52px 0; border-top:1px solid var(--sn-line); border-bottom:1px solid var(--sn-line); background:#fff; }
.sn-partners__head{ text-align:center; color:var(--sn-mist); font-family:var(--font-display); font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:30px; }
.sn-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sn-marquee__track{ display:flex; gap:64px; width:max-content; animation:snMarquee 34s linear infinite; }
.sn-marquee:hover .sn-marquee__track{ animation-play-state:paused; }
@keyframes snMarquee{ to{ transform:translateX(-50%); } }
.sn-partner{ display:flex; align-items:center; justify-content:center; height:46px; flex:0 0 auto; }
.sn-partner img{ max-height:40px; width:auto; filter:grayscale(1); opacity:.62; transition:filter .25s, opacity .25s, transform .25s; }
.sn-partner:hover img{ filter:grayscale(0); opacity:1; transform:translateY(-2px); }
.sn-partner__word{
  font-family:var(--font-display); font-weight:700; font-size:1.35rem; letter-spacing:.02em;
  color:#9fb2c1; transition:color .25s, transform .25s; white-space:nowrap;
}
.sn-partner:hover .sn-partner__word{ color:var(--sn-blue); transform:translateY(-2px); }

/* ---- 11.6 ACCOMPLISHMENTS band over a photo ---- */
.sn-accomplish{ position:relative; overflow:hidden; color:#fff; padding:96px 0; }
.sn-accomplish__bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
.sn-accomplish::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(140deg, rgba(6,43,71,.94), rgba(8,58,94,.86) 60%, rgba(15,112,183,.72)); }
.sn-accomplish > .sn-container{ position:relative; z-index:2; }
.sn-accomplish .sn-eyebrow{ color:var(--sn-cyan); }
.sn-accomplish .sn-eyebrow::before{ background:var(--sn-cyan); }
.sn-accomplish h2{ color:#fff; }
.sn-accomplish .sn-lede{ color:#bcd6e9; }
.sn-stat{ position:relative; overflow:hidden; background:rgba(255,255,255,.06); backdrop-filter:blur(4px);
  transition:transform .25s ease, border-color .25s ease, background .25s ease; }
.sn-stat:hover{ transform:translateY(-6px); border-color:var(--sn-cyan); background:rgba(56,182,255,.10); }
.sn-stat::before{ content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:linear-gradient(90deg, var(--sn-cyan), transparent); }
.sn-stat__num{ font-size:3rem; }

/* ---- 11.7 CARD sheen + gradient top accent for service cards ---- */
.sn-card{ background:linear-gradient(#fff,#fff) padding-box, linear-gradient(180deg, var(--sn-line), transparent) border-box; border:1px solid transparent; }
.sn-card:hover{ box-shadow:var(--shadow-lg); }
.sn-card__icon{
  padding:12px; border-radius:12px; width:56px; height:56px;
  background:linear-gradient(140deg, rgba(15,112,183,.12), rgba(56,182,255,.10));
}
.sn-pillar__icon{ padding:10px; border-radius:12px; background:linear-gradient(140deg, rgba(15,112,183,.12), rgba(56,182,255,.10)); width:48px; height:48px; }

/* ---- 11.8 Section title, centred variant ---- */
.sn-head-center{ text-align:center; max-width:720px; margin:0 auto 10px; }
.sn-head-center .sn-eyebrow{ justify-content:center; }
.sn-head-center .sn-lede{ margin-left:auto; margin-right:auto; }

/* ---- 11.9 Reveal: add slide + stagger ---- */
.sn-reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.sn-reveal.is-in{ opacity:1; transform:none; }
.sn-reveal:nth-child(2){ transition-delay:.08s; }
.sn-reveal:nth-child(3){ transition-delay:.16s; }
.sn-reveal:nth-child(4){ transition-delay:.24s; }

/* ---- 11.10 Post & product cards: media zoom ---- */
.sn-post-card{ overflow:hidden; border-radius:var(--radius); }
.sn-post-card__media{ overflow:hidden; }
.sn-post-card__media img{ transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.sn-post-card:hover .sn-post-card__media img{ transform:scale(1.07); }

@media (prefers-reduced-motion:reduce){
  .sn-marquee__track{ animation:none; }
  .sn-net-line{ animation:none; }
}

/* Uploaded logo image sizing (Site Identity) */
.sn-logo--img{ display:flex; align-items:center; }
.sn-logo--img img{ max-height:46px; width:auto; }