/* Uplink Logic — Clean Brochure Theme */
:root{
  --accent:#7c5cff;
  --accent-ink:#fff;
  --bg:#ffffff;
  --text:#111322;
  --muted:#5b6176;
  --border:#e7e9f2;
  --card:#f7f8fd;
  --radius:14px;
  --radius-sm:10px;
  --shadow: 0 10px 20px rgba(17,19,34,0.06);
  --maxw: 1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.86);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.2px}
.brand .logo{width:32px;height:32px;border-radius:10px;background:var(--accent);box-shadow:inset 0 0 0 4px rgba(255,255,255,.35)}
.brand .name{font-size:clamp(18px,1.9vw,28px);font-weight:900;letter-spacing:.2px;color:var(--text)}
.nav{display:flex;align-items:center;gap:18px}
.nav a{color:var(--text);opacity:.85}
.nav a:hover{opacity:1}
.cta{display:flex;gap:10px;align-items:center}
.button{display:inline-block;border-radius:999px;padding:10px 16px;border:1px solid var(--border);font-weight:800}
.button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 10px 18px rgba(124,92,255,.22)}
.button.ghost{background:transparent;color:var(--text)}
.button.small{padding:8px 12px;font-size:14px}
/* Mobile nav */
.burger{display:none;border:1px solid var(--border);border-radius:10px;background:#fff;width:40px;height:36px;align-items:center;justify-content:center}
.burger span{width:18px;height:2px;background:var(--text);position:relative;display:block}
.burger span:before,.burger span:after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text)}
.burger span:before{top:-6px}.burger span:after{top:6px}
@media (max-width:820px){
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:12px 20px}
  .nav.open{display:flex;flex-wrap:wrap;gap:12px}
  .burger{display:flex}
  .cta{display:none}
}
/* Hero */
.hero{padding:72px 0 48px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#fff 0%, #fafbff 100%)}
.hero .eyebrow{display:inline-block;font-weight:800;color:#7a80a0;background:#eef0fb;border:1px solid #e0e3f5;border-radius:999px;padding:6px 10px;margin-bottom:12px}
.hero h1{font-size: clamp(28px, 4.5vw, 44px);line-height:1.12;margin:0 0 10px;font-weight:900;letter-spacing:.2px}
.hero .lead{color:var(--muted);max-width:760px;margin:10px 0 18px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
/* Sections */
.section{padding:56px 0}
.section .section-title{font-size:24px;margin:0 0 8px}
.muted{color:var(--muted)}
/* Card Grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-12{grid-column:span 12}
@media (max-width:920px){.col-4,.col-6{grid-column:span 6}}
@media (max-width:620px){.col-4,.col-6{grid-column:span 12}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px}
.note{font-size:14px;color:var(--muted)}
/* Lists */
ul.clean{padding-left:18px;margin:8px 0}
ul.clean li{margin:6px 0}
/* Footer */
.footer{border-top:1px solid var(--border);background:#fff;padding:26px 0;color:var(--muted);font-size:14px}
.footer .cols{display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:space-between}
/* Forms */
form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){form .row{grid-template-columns:1fr}}
label{font-weight:700;display:block;margin-bottom:6px;color:#2e3351}
input,textarea{width:100%;padding:12px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff}
textarea{min-height:140px}
form .actions{display:flex;gap:10px;margin-top:10px}
/* Helpers */
.center{text-align:center}
.badge{display:inline-block;border:1px solid var(--border);padding:4px 10px;border-radius:999px;color:var(--muted)}
.small{font-size:14px}


/* === Dark Theme Overrides === */
:root{
  --accent:#7c5cff;
  --accent-ink:#fff;
  --bg:#0f1220;
  --text:#e6e9f7;
  --muted:#a8afd1;
  --border:#242a45;
  --card:#161a2e;
  --shadow: 0 10px 24px rgba(0,0,0,.35);
}
html,body{background:var(--bg);color:var(--text)}
a{color:#b7a6ff}
.header{background:rgba(9,11,22,.76);border-bottom:1px solid var(--border)}
.nav a{color:var(--text);opacity:.85}
.hero{background:linear-gradient(180deg,#14172b 0%, #0f1220 100%);border-bottom:1px solid var(--border)}
.card{background:var(--card);border-color:var(--border)}
.footer{background:#0e1120;border-top:1px solid var(--border);color:var(--muted)}
input,textarea{background:#0f1328;border-color:#2a3255;color:#e6e9f7}
label{color:#d7dbf5}
.button.ghost{border-color:#3a4170;color:#e6e9f7}
.badge{border-color:#2a3054;color:#a8afd1}


/* === About page polish === */
.profile{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start}
@media (max-width:980px){.profile{grid-template-columns:1fr}}
.profile-photo{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:var(--shadow)}
.profile-photo img{border-radius:12px;display:block;width:100%;height:auto}
.profile-panel{background:rgba(22,26,46,.7);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.profile-panel h3{margin-top:0}
.cert-badges{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 6px}
.cert-badges .button{border-radius:999px;padding:10px 14px}
hr.soft{border:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);margin:16px 0;opacity:.7}

/* Hero tighten */
.hero{padding:68px 0 40px}
.hero .lead{max-width:820px}
.eyebrow{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#cfd3f2}

/* Buttons polish */
.button.primary{transition:transform .08s ease, box-shadow .2s ease}
.button.primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(124,92,255,.35)}


/* === About: title + circular avatar & Services card polish === */
.subtitle{margin:6px 0 0;color:var(--muted);font-weight:700}
.profile-photo{display:flex;align-items:center;justify-content:center;padding:18px}
.profile-photo img.avatar{width:240px;height:240px;border-radius:999px;object-fit:cover;box-shadow:0 0 0 8px rgba(255,255,255,.05)}
@media (max-width:980px){.profile-photo img.avatar{width:200px;height:200px}}

/* Mirror card polish on Services */
.card{transition:transform .08s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.35)}


/* === About avatar purple glow === */
.profile-photo{position:relative;overflow:visible}
.profile-photo::before{
  content:"";
  position:absolute;
  inset:-14px;
  background: radial-gradient(60% 60% at 50% 40%, rgba(124,92,255,.45), rgba(124,92,255,.18) 45%, rgba(124,92,255,0) 70%);
  filter: blur(14px);
  border-radius:22px;
  z-index:0;
}
.profile-photo img.avatar{
  position:relative; z-index:1;
  box-shadow:
    0 0 0 6px rgba(124,92,255,.15),
    0 14px 36px rgba(0,0,0,.35),
    0 0 60px rgba(124,92,255,.35);
}


/* === Pill color improvements === */
.eyebrow, .badge{
  background: rgba(124,92,255,0.16);
  border: 1px solid rgba(124,92,255,0.35);
  color: #e7e2ff;
  box-shadow: 0 6px 20px rgba(124,92,255,0.25);
}


/* === Pill color style (Recommended: accent-tinted) === */
.eyebrow, .badge{
  background: rgba(124,92,255,.16) !important;
  border: 1px solid rgba(124,92,255,.35) !important;
  color: #e7e2ff !important;
  box-shadow: 0 6px 20px rgba(124,92,255,.25) !important;
}


/* === Typography sizing v4 === */
.hero h1{font-size:clamp(36px,5.5vw,56px) !important; line-height:1.08; letter-spacing:.2px; font-weight:900;}
.hero .lead{font-size:clamp(15px,1.55vw,18px) !important;}
.section h2, .section .section-title{font-size:clamp(32px,4.8vw,48px) !important; line-height:1.1; font-weight:900;}


/* === Mobile nav improvements === */
:root{ --nav-surface:#0b0f1d; }

/* Burger button contrast + animation */
.burger{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18);}
.burger span, .burger span:before, .burger span:after{
  background:#e6e9f7; transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.burger.open span{background:transparent}
.burger.open span:before{top:0; transform:rotate(45deg)}
.burger.open span:after{top:0; transform:rotate(-45deg)}

/* Drop-down surface */
@media (max-width:820px){
  .nav{
    display:none; position:absolute; top:64px; left:0; right:0;
    background: var(--nav-surface);
    border-bottom:1px solid var(--border);
    box-shadow: 0 18px 36px rgba(0,0,0,.5);
    padding:14px 16px;
    z-index:1001;
  }
  .nav.open{
    display:flex; flex-direction:column; gap:6px;
  }
  .nav.open a{
    display:block;
    color: var(--text) !important;
    padding:12px 10px; border-radius:10px;
  }
  .nav.open a:hover{
    background: rgba(255,255,255,.06);
  }
  .nav.open .button{
    align-self:flex-start;
    border-color: rgba(124,92,255,.45) !important;
    box-shadow: 0 10px 24px rgba(124,92,255,.28);
  }
  /* Body overlay when menu open */
  body.menu-open::after{
    content:""; position:fixed; inset:64px 0 0 0; z-index:1000;
    background: rgba(0,0,0,.45);
  }
}


/* === Mobile nav fix v2 (slide-down, higher z-index) === */
@media (max-width:820px){
  .nav{
    display:block;
    position:fixed;
    top:64px; left:0; right:0;
    background: var(--nav-surface, #0b0f1d);
    border-bottom:1px solid var(--border);
    box-shadow: 0 18px 36px rgba(0,0,0,.5);
    padding:14px 16px;
    z-index: 3000; /* above overlay */
    transform: translateY(-120%);
    opacity:0;
    pointer-events:none;
    transition: transform .25s ease, opacity .2s ease;
  }
  .nav.open{
    transform: translateY(0);
    opacity:1;
    pointer-events:auto;
    display:block;
  }
  .nav a{
    display:block;
    color: var(--text) !important;
    padding:12px 10px;
    border-radius:10px;
  }
  .nav a:hover{ background: rgba(255,255,255,.06); }
  .nav .button{
    align-self:flex-start;
    border-color: rgba(124,92,255,.45) !important;
    box-shadow: 0 10px 24px rgba(124,92,255,.28);
  }
  body.menu-open::after{
    content:""; position:fixed; inset:64px 0 0 0; z-index:2000;
    background: rgba(0,0,0,.45);
  }
}


/* === About hero polish === */
.hero{padding:72px 0 40px !important}
.hero h1{
  max-width: 22ch;
  text-wrap: balance;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 10px 0 6px;
  font-weight: 900;
}
.subtitle{
  margin: 2px 0 12px;
  color: var(--muted);
  font-weight: 800;
  font-size: clamp(14px,1.4vw,18px);
}
.hero .lead{
  max-width: 64ch;
  font-size: clamp(15px,1.5vw,18px);
}

/* Card & panel tweaks for cohesion */
.card{
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,.36);
  border: 1px solid rgba(255,255,255,.06);
}
.profile-panel{background: rgba(20,24,42,.85)}
.profile-photo{padding: 16px}
.profile-photo img.avatar{
  box-shadow:
    0 0 0 6px rgba(124,92,255,.18),
    0 18px 40px rgba(0,0,0,.45),
    0 0 80px rgba(124,92,255,.35);
}

/* Section divider subtle */
hr.soft{opacity:.5}


/* === Remove header logo square === */
.brand .logo{display:none !important;}
.brand{gap:6px;}


/* Brand prominence tweaks */
.header nav a{opacity:.9;transition:opacity .15s ease}
.header nav a:hover{opacity:1}