/* =====================================================
   TOPEH v5.0 — iOS 26 Liquid Glass Edition
   styles.css
   ===================================================== */

/* ── Variables ───────────────────────────────────── */
:root {
  --accent:        #2ECC8A;
  --accent-2:      #1aab6d;
  --accent-glow:   rgba(46,204,138,0.22);
  --accent-border: rgba(46,204,138,0.28);
  --accent-dim:    rgba(46,204,138,0.08);
  --accent-bright: #5fffb8;

  --bg:      #05060a;
  --bg-deep: #030407;

  --text:   #f0ede8;
  --text-2: #a09c97;
  --text-3: #52504d;

  --border:   rgba(255,255,255,0.07);
  --border-h: rgba(255,255,255,0.14);

  /* iOS 26 Liquid Glass tokens */
  --glass-bg:          rgba(255,255,255,0.055);
  --glass-bg-dark:     rgba(5,6,10,0.45);
  --glass-bg-tinted:   rgba(46,204,138,0.045);
  --glass-blur:        blur(52px) saturate(200%) brightness(1.06);
  --glass-blur-heavy:  blur(72px) saturate(220%) brightness(1.08);
  --glass-blur-light:  blur(28px) saturate(180%) brightness(1.04);
  --glass-border-top:  rgba(255,255,255,0.26);
  --glass-border-side: rgba(255,255,255,0.1);
  --glass-border-bot:  rgba(0,0,0,0.18);
  --glass-inner-hi:    inset 0 1px 0 rgba(255,255,255,0.18);
  --glass-inner-sh:    inset 0 -1px 0 rgba(0,0,0,0.12);
  --glass-shadow:      0 24px 72px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.35);
  --glass-shadow-sm:   0 8px 32px rgba(0,0,0,0.4),  0 0 0 1px rgba(0,0,0,0.25);

  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body:    'Outfit', system-ui, sans-serif;

  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.5rem;
  --sp-xl:  5rem;
  --sp-2xl: 9rem;

  --max-w: 1200px;
  --r:     8px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --t:     0.22s ease;
  --t-s:   0.45s cubic-bezier(0.16,1,0.3,1);
}

/* ── Reset ───────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px }
body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.75;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse 70% 50% at 15%  20%, rgba(46,204,138,0.10) 0%,transparent 55%),
    radial-gradient(ellipse 60% 60% at 85%  75%, rgba(14,165,233,0.07) 0%,transparent 55%),
    radial-gradient(ellipse 80% 40% at 50% 110%, rgba(124,58,237,0.06) 0%,transparent 50%),
    radial-gradient(ellipse 50% 50% at 70%  30%, rgba(46,204,138,0.04) 0%,transparent 50%);
  background-attachment: fixed;
}
img,video { display:block; max-width:100%; height:auto }
a { color:var(--accent); text-decoration:none; transition:color var(--t) }
a:hover { color:var(--accent-bright) }
ul { list-style:none }
a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r) }

/* ── Skip link ───────────────────────────────────── */
.skip-link { position:absolute; top:-100%; left:1.5rem; background:var(--accent); color:#05060a; padding:.6rem 1.2rem; border-radius:var(--r); font-weight:700; font-size:.85rem; z-index:9999; transition:top .2s }
.skip-link:focus { top:1rem }

/* ── Layout ──────────────────────────────────────── */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem) }
.section { padding:var(--sp-2xl) 0 }

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.88rem 2.2rem; border-radius:100px;
  font-family:var(--ff-body); font-size:.875rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  cursor:pointer; border:none; text-decoration:none;
  position:relative; overflow:hidden;
  transition:background var(--t-s),color var(--t-s),transform var(--t-s),box-shadow var(--t-s);
}
.btn::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.14) 50%,transparent 60%); transform:translateX(-100%); transition:transform .5s ease }
.btn:hover::after { transform:translateX(100%) }
.btn-primary {
  background:linear-gradient(135deg,#2ECC8A,#1aab6d); color:#05060a;
  box-shadow:0 0 0 1px rgba(46,204,138,0.4), 0 8px 32px rgba(46,204,138,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-primary:hover { background:linear-gradient(135deg,#5fffb8,#2ECC8A); color:#05060a; transform:translateY(-2px); box-shadow:0 0 0 1px rgba(46,204,138,0.6), 0 16px 48px rgba(46,204,138,0.45), inset 0 1px 0 rgba(255,255,255,0.4) }
.btn-outline {
  background:rgba(255,255,255,0.06); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  color:var(--text);
  border-top:1px solid rgba(255,255,255,0.22); border-left:1px solid rgba(255,255,255,0.1);
  border-right:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(0,0,0,0.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 4px 20px rgba(0,0,0,0.3);
}
.btn-outline:hover { background:rgba(46,204,138,0.1); border-top-color:rgba(46,204,138,0.5); color:var(--accent); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(46,204,138,0.2), 0 8px 32px rgba(0,0,0,0.35), 0 0 24px rgba(46,204,138,0.12) }
.btn-full { width:100%; justify-content:center }

/* ── Typography ──────────────────────────────────── */
.section-eyebrow { display:inline-block; font-family:var(--ff-body); font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem }
.section-title { font-family:var(--ff-display); font-size:clamp(2.4rem,5vw,3.8rem); font-weight:300; line-height:1.1; letter-spacing:-.025em; margin-bottom:1.5rem }
.section-title em { font-style:italic; color:var(--accent) }

/* =====================================================
   PAGE LOADER
   ===================================================== */
.page-loader { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:var(--bg-deep); transition:opacity .5s ease }
.page-loader.done { opacity:0; pointer-events:none }
.loader-ring { width:52px; height:52px; border-radius:50%; border:2px solid rgba(255,255,255,0.06); border-top-color:var(--accent); animation:spin .8s linear infinite; box-shadow:0 0 20px rgba(46,204,138,0.25) }
@keyframes spin { to { transform:rotate(360deg) } }

/* =====================================================
   NAVIGATION — iOS 26 Liquid Glass Pill
   ===================================================== */
.site-header { position:fixed; top:14px; left:50%; right:auto; transform:translateX(-50%); width:calc(100% - 40px); max-width:980px; z-index:900; transition:top .3s }
.navbar {
  display:flex; align-items:center; justify-content:space-between;
  border-radius:22px; padding:10px 20px; position:relative;
  background:rgba(5,6,10,0.15);
  backdrop-filter:blur(60px) saturate(220%) brightness(1.1);
  -webkit-backdrop-filter:blur(60px) saturate(220%) brightness(1.1);
  border-top:1px solid rgba(255,255,255,0.24); border-left:1px solid rgba(255,255,255,0.1);
  border-right:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(0,0,0,0.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.14),
    0 12px 48px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.4);
  transition:background .35s, box-shadow .35s, border-color .35s;
  isolation: isolate;
}
/* Top gloss layer — simulates curved glass catching light */
.navbar::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:50%;
  border-radius:22px 22px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.095) 0%, transparent 100%);
  pointer-events:none; z-index:0;
}
/* Refraction shimmer that shifts on hover */
.navbar::after {
  content:'';
  position:absolute; inset:0; border-radius:22px;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.035) 50%, transparent 70%);
  background-size:200% 100%; background-position:200% 0;
  transition: background-position 0.8s ease;
  pointer-events:none; z-index:0;
}
.navbar:hover::after { background-position:-50% 0; }
.site-header.scrolled .navbar { background:rgba(5,6,10,0.40); border-top-color:rgba(255,255,255,0.28); box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0 20px 60px rgba(0,0,0,0.75), 0 0 40px rgba(46,204,138,0.06), 0 0 0 1px rgba(0,0,0,0.5) }

.logo { font-family:var(--ff-display); font-size:1.5rem; font-weight:600; color:var(--text); letter-spacing:.04em; transition:color var(--t); position:relative; z-index:1; }
.logo:hover { color:var(--accent) }
.logo-dot { color:var(--accent) }

.nav-links { display:flex; align-items:center; gap:.15rem; flex-wrap:wrap; position:relative; z-index:1; }
.nav-link { font-size:.78rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); padding:.45rem .8rem; border-radius:12px; transition:color var(--t),background var(--t),box-shadow var(--t),border-color var(--t); position:relative; overflow:hidden; isolation:isolate }
.nav-link:hover { color:var(--text); background:rgba(255,255,255,0.07); }
.nav-link.active {
  color:var(--text);
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(32px) saturate(200%) brightness(1.12);
  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.12);
  border-top: 1px solid rgba(255,255,255,0.30);
  border-left: 1px solid rgba(255,255,255,0.14);
  border-right: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(0,0,0,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.26),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 4px 18px rgba(0,0,0,0.25),
    0 0 14px rgba(46,204,138,0.12),
    0 0 0 1px rgba(46,204,138,0.08);
}
/* Gloss specular sheen on active */
.nav-link.active::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%);
  border-radius:12px 12px 0 0;
  pointer-events:none;
}
/* Liquid glass click ripple */
.nav-link .glass-ripple {
  position:absolute; border-radius:50%;
  width:8px; height:8px; margin-left:-4px; margin-top:-4px;
  background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(46,204,138,0.25) 40%, transparent 70%);
  pointer-events:none; transform:scale(0); opacity:1;
  animation: glassRipple 0.65s cubic-bezier(0.16,1,0.3,1) forwards;
  filter: blur(1px);
}
@keyframes glassRipple {
  0%   { transform:scale(0);  opacity:0.8; filter:blur(0px) }
  40%  { transform:scale(8);  opacity:0.4; filter:blur(2px) }
  100% { transform:scale(18); opacity:0;   filter:blur(5px) }
}
.nav-link.nav-cta { background:linear-gradient(135deg,rgba(46,204,138,0.85),rgba(26,171,109,0.85)); backdrop-filter:blur(10px); color:#05060a; padding:.45rem 1.2rem; border-radius:100px; margin-left:.5rem; border-top:1px solid rgba(255,255,255,0.35); box-shadow:inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 16px rgba(46,204,138,0.3) }
.nav-link.nav-cta:hover { background:linear-gradient(135deg,#5fffb8,#2ECC8A); color:#05060a; box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 28px rgba(46,204,138,0.45) }
/* Override active state on CTA pill */
.nav-link.nav-cta.active { background:linear-gradient(135deg,#5fffb8,#2ECC8A); color:#05060a; border-top:1px solid rgba(255,255,255,0.45); box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 28px rgba(46,204,138,0.45) }

/* Nav utils */
.nav-utils { display:flex; align-items:center; gap:6px; margin-left:8px; position:relative; z-index:1; }
.nav-util-btn {
  width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:.75rem; font-weight:700; letter-spacing:.04em; transition:all .2s;
  background:rgba(255,255,255,0.05); backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,0.18); border-left:1px solid rgba(255,255,255,0.09);
  border-right:1px solid rgba(255,255,255,0.07); border-bottom:1px solid rgba(0,0,0,0.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1); color:var(--text-2);
}
.nav-util-btn:hover { background:rgba(46,204,138,0.1); color:var(--accent); border-top-color:rgba(46,204,138,0.4); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 0 12px rgba(46,204,138,0.18) }

/* Nav dropdown */
.nav-dropdown { position:relative }
.nav-dropdown-btn { background:none; border:none; cursor:pointer; font-family:inherit; font-size:.78rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:inherit; padding:0; display:flex; align-items:center; gap:4px }
.nav-chevron { font-size:.7em; transition:transform .25s; display:inline-block }
.nav-dropdown.open .nav-chevron { transform:rotate(180deg) }
.nav-dropdown-menu {
  display:none; position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%);
  min-width:200px; list-style:none; margin:0; padding:8px; border-radius:18px; z-index:200; animation:dropIn .2s ease;
  background:rgba(5,6,10,0.55); backdrop-filter:blur(60px) saturate(200%); -webkit-backdrop-filter:blur(60px) saturate(200%);
  border-top:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.09);
  border-right:1px solid rgba(255,255,255,0.07); border-bottom:1px solid rgba(0,0,0,0.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 20px 60px rgba(0,0,0,0.6);
}
@keyframes dropIn { from{opacity:0;transform:translateX(-50%) translateY(-10px) scale(0.97)} to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} }
.nav-dropdown.open .nav-dropdown-menu { display:block }
.nav-dropdown-item { display:block; padding:10px 16px; color:rgba(255,255,255,0.75); text-decoration:none; font-size:.9rem; border-radius:12px; transition:background .15s,color .15s }
.nav-dropdown-item:hover { background:rgba(46,204,138,0.12); color:#2ECC8A }

/* Hamburger */
.nav-toggle-input { display:none }
.nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; border-radius:var(--r); background:none; border:none }
.nav-hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s,opacity .3s }

@media(max-width:900px) {
  .site-header { width:calc(100% - 28px) }
  .nav-hamburger { display:flex; z-index:1100; position:relative }
  .nav-utils { margin-left:4px }
  .nav-links {
    display:none; position:absolute; top:calc(100% + 12px); left:0; right:0;
    flex-direction:column; align-items:stretch; padding:8px; border-radius:20px;
    z-index:899; max-height:80vh; overflow-y:auto; gap:2px;
    background:rgba(5,6,10,0.72); backdrop-filter:blur(60px) saturate(200%); -webkit-backdrop-filter:blur(60px) saturate(200%);
    border-top:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.09);
    border-right:1px solid rgba(255,255,255,0.07); border-bottom:1px solid rgba(0,0,0,0.3);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 72px rgba(0,0,0,0.75);
  }
  .nav-toggle-input:checked ~ .nav-links { display:flex }
  .nav-link { font-size:.92rem; padding:13px 18px; text-align:center; width:100%; border-radius:14px; justify-content:center; }
  .nav-dropdown-btn { width:100%; text-align:center; justify-content:center; padding:13px 18px; border-radius:14px; }
  .nav-link.nav-cta { margin-left:0; margin-top:4px }
  .nav-toggle-input:checked ~ .nav-hamburger span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
  .nav-toggle-input:checked ~ .nav-hamburger span:nth-child(2) { opacity:0 }
  .nav-toggle-input:checked ~ .nav-hamburger span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }
  .nav-dropdown-menu { position:static; transform:none; box-shadow:none; background:rgba(46,204,138,0.05); border-radius:12px; margin:4px 0 4px 12px; animation:none; padding:4px; border:1px solid rgba(46,204,138,0.1) }
  .nav-dropdown-item { text-align:center; }
}

/* =====================================================
   HERO
   ===================================================== */
.hero { min-height:100svh; display:flex; align-items:center; position:relative; overflow:hidden }
.hero-bg { position:absolute; inset:0; background:transparent }
.hero-grain { position:absolute; inset:0; opacity:.018; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-size:200px }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent) }
.hero-orb { position:absolute; border-radius:50%; filter:blur(90px); animation:orb-drift 14s ease-in-out infinite alternate; pointer-events:none; will-change:transform }
.hero-orb-1 { width:600px; height:600px; background:rgba(46,204,138,.09); top:5%; right:-140px; animation-delay:0s }
.hero-orb-2 { width:400px; height:400px; background:rgba(14,165,233,.06); bottom:10%; left:-100px; animation-delay:-5s }
@keyframes orb-drift { 0%{transform:translateY(0) scale(1)} 100%{transform:translateY(-40px) scale(1.06)} }

.hero-content { position:relative; z-index:2; padding-top:6rem; padding-bottom:4rem; display:grid; grid-template-columns:1fr 400px; gap:5rem; align-items:center }
.hero-text { display:flex; flex-direction:column }
.hero-animate { opacity:0; transform:translateY(22px) }

.availability-badge {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem 1.2rem .45rem .8rem; border-radius:100px;
  font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); margin-bottom:2rem; width:fit-content;
  background:rgba(46,204,138,0.09); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(46,204,138,0.35); border-left:1px solid rgba(46,204,138,0.18);
  border-right:1px solid rgba(46,204,138,0.14); border-bottom:1px solid rgba(0,0,0,0.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 20px rgba(46,204,138,0.12);
}
.availability-dot { width:8px; height:8px; background:var(--accent); border-radius:50%; animation:dot-pulse 2s ease-in-out infinite; box-shadow:0 0 8px rgba(46,204,138,0.7) }
@keyframes dot-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(46,204,138,.7)} 50%{box-shadow:0 0 0 6px rgba(46,204,138,0)} }

.hero-eyebrow { font-size:.78rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--text-2); margin-bottom:1rem }
.hero-headline { font-family:var(--ff-display); font-size:clamp(4rem,9vw,8rem); font-weight:300; line-height:1.0; letter-spacing:-.04em; margin-bottom:1.5rem }
.hero-name { display:block; background:linear-gradient(135deg,#f0ede8 0%,var(--accent) 55%,#5fffb8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.hero-sub-name { display:block; font-style:italic; color:var(--text) }
.hero-sub { font-size:1.05rem; color:var(--text-2); max-width:480px; margin-bottom:2.5rem; line-height:1.75 }
.hero-actions { display:flex; gap:.85rem; flex-wrap:wrap; margin-bottom:3.5rem }

.hero-stats { display:flex; gap:2rem; flex-wrap:wrap }
.stat { display:flex; flex-direction:column }
.stat-num { font-family:var(--ff-display); font-size:2.6rem; font-weight:600; color:var(--text); line-height:1; letter-spacing:-.03em }
.stat-label { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-top:.3rem }

/* Floating artwork */
.hero-artwork { position:relative; display:flex; align-items:center; justify-content:center; animation:hero-float 7s ease-in-out infinite }
@keyframes hero-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
.hero-artwork-glow { position:absolute; inset:-32px; background:radial-gradient(ellipse at center,rgba(46,204,138,0.22) 0%,transparent 70%); filter:blur(28px); border-radius:50%; animation:glow-pulse 7s ease-in-out infinite; pointer-events:none }
@keyframes glow-pulse { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.1)} }
.hero-artwork-frame {
  position:relative; border-radius:28px; overflow:hidden; max-width:360px; width:100%;
  border-top:1px solid rgba(255,255,255,0.28); border-left:1px solid rgba(255,255,255,0.14);
  border-right:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(0,0,0,0.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), 0 40px 100px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,0,0,0.5), 0 0 80px rgba(46,204,138,0.12);
}
.hero-artwork-frame::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom,transparent 55%,rgba(5,6,10,0.85) 100%); pointer-events:none }
.hero-artwork-img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block }
.hero-artwork-label { position:absolute; bottom:16px; left:14px; right:14px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:8px }
.hero-artwork-badge { padding:5px 12px; border-radius:10px; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); background:rgba(5,6,10,0.65); backdrop-filter:blur(16px); border-top:1px solid rgba(46,204,138,0.35); border-left:1px solid rgba(46,204,138,0.18); border-right:1px solid rgba(46,204,138,0.12); border-bottom:1px solid rgba(0,0,0,0.2); box-shadow:inset 0 1px 0 rgba(255,255,255,0.1) }
.hero-artwork-medium { padding:5px 10px; border-radius:10px; font-size:.68rem; color:var(--text-2); letter-spacing:.06em; background:rgba(5,6,10,0.55); backdrop-filter:blur(16px); border-top:1px solid rgba(255,255,255,0.18); border-left:1px solid rgba(255,255,255,0.08); border-right:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(0,0,0,0.2); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08) }

.hero-scroll-hint { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.6rem; z-index:2 }
.hero-scroll-hint span { font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-3) }
.scroll-line { width:1px; height:48px; background:linear-gradient(to bottom,var(--accent),transparent); animation:scroll-line 2.2s ease-in-out infinite }
@keyframes scroll-line { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

@media(max-width:900px) { .hero-content{grid-template-columns:1fr;gap:0} .hero-artwork{display:none} .hero-headline{font-size:clamp(3.5rem,12vw,6rem)} }

/* =====================================================
   ABOUT
   ===================================================== */
.about { background:transparent }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center }
@media(max-width:820px) { .about-grid { grid-template-columns:1fr } }

.about-image-wrap { position:relative }
.about-image-frame { position:relative; display:inline-block }
.about-img { width:100%; max-width:440px; border-radius:var(--r-2xl); object-fit:cover; aspect-ratio:4/5; display:block; filter:grayscale(12%) contrast(1.06); position:relative; z-index:1; box-shadow:0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.4) }
.about-image-frame::before { content:''; position:absolute; inset:-14px; border-top:1px solid rgba(46,204,138,0.3); border-left:1px solid rgba(46,204,138,0.14); border-right:1px solid rgba(46,204,138,0.1); border-bottom:1px solid rgba(0,0,0,0.2); border-radius:calc(var(--r-2xl) + 14px); z-index:0; animation:frame-glow 5s ease-in-out infinite alternate }
@keyframes frame-glow { 0%{box-shadow:0 0 0 0 rgba(46,204,138,0)} 100%{box-shadow:0 0 40px rgba(46,204,138,0.15)} }
.about-badge { position:absolute; bottom:-18px; right:-18px; z-index:2; padding:.65rem 1.4rem; border-radius:var(--r-lg); font-family:var(--ff-display); font-size:1.1rem; font-weight:700; letter-spacing:.06em; color:#05060a; background:linear-gradient(135deg,#2ECC8A,#1aab6d); border-top:1px solid rgba(255,255,255,0.4); box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 12px 32px rgba(46,204,138,0.45) }

.about-callme { font-size:1.05rem; color:var(--text-2); margin-bottom:1rem }
.about-callme strong { color:var(--accent) }
.about-bio { color:var(--text-2); margin-bottom:1rem; line-height:1.82 }
.skills-block { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin:2rem 0; padding:1.5rem; border-radius:var(--r-xl); background:rgba(255,255,255,0.04); backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px); border-top:1px solid rgba(255,255,255,0.14); border-left:1px solid rgba(255,255,255,0.07); border-right:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.16); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.3) }
.skills-heading { font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:.8rem }
.skills-list li { font-size:.88rem; color:var(--text-2); padding:.28rem 0; display:flex; align-items:center; gap:.5rem }
.skills-list li::before { content:''; width:5px; height:5px; background:var(--accent); border-radius:50%; flex-shrink:0; box-shadow:0 0 6px rgba(46,204,138,0.5) }
.about-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem }

/* =====================================================
   ACHIEVEMENTS
   ===================================================== */
.achievements-section { background:transparent }
.achievements-layout { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-top:3rem }
.achievements-cards { display:flex; flex-direction:column; gap:.85rem }
@media(max-width:820px) { .achievements-layout { grid-template-columns:1fr } }

.achievement-card { display:flex; gap:1.2rem; padding:1.4rem; border-radius:var(--r-xl); transition:transform var(--t-s),box-shadow var(--t-s),border-color var(--t-s); background:rgba(255,255,255,0.04); backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px); border-top:1px solid rgba(255,255,255,0.12); border-left:1px solid rgba(255,255,255,0.06); border-right:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(0,0,0,0.16); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 4px 20px rgba(0,0,0,0.3) }
.achievement-card:hover { transform:translateX(5px) translateY(-1px); border-top-color:rgba(46,204,138,0.3); box-shadow:inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.4), 0 0 24px rgba(46,204,138,0.08) }
.achievement-card--gold { border-top-color:rgba(255,200,80,0.3); background:linear-gradient(135deg,rgba(255,200,80,0.06),rgba(255,255,255,0.03)) }
.achievement-card--gold:hover { border-top-color:rgba(255,200,80,0.5); box-shadow:inset 0 1px 0 rgba(255,200,80,0.1), 0 8px 32px rgba(0,0,0,0.4), 0 0 28px rgba(255,200,80,0.08) }
.achievement-card-icon { font-size:1.8rem; flex-shrink:0; margin-top:.1rem }
.achievement-card-body { flex:1 }
.achievement-card-title { font-family:var(--ff-display); font-size:1.1rem; font-weight:600; color:var(--text); margin-bottom:.3rem }
.achievement-card-detail { font-size:.86rem; color:var(--text-2); line-height:1.65 }

/* Certificate Carousel */
.cert-carousel-wrapper { position:relative }
.cert-carousel-track { overflow:hidden; border-radius:var(--r-xl) }
.cert-slide { display:none; animation:certFadeIn .35s ease }
.cert-slide.active { display:block }
@keyframes certFadeIn { from{opacity:0;transform:scale(0.98)} to{opacity:1;transform:scale(1)} }
.cert-photo-slot { overflow:hidden; border-radius:var(--r-xl); border-top:1px solid rgba(255,255,255,0.14); border-left:1px solid rgba(255,255,255,0.07); border-right:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.2); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 20px 60px rgba(0,0,0,0.5) }
.cert-photo-img { width:100%; object-fit:cover; border-radius:var(--r-xl); display:block; transition:transform .5s var(--t-s) }
.cert-photo-slot:hover .cert-photo-img { transform:scale(1.025) }
.cert-photo-caption { font-size:.8rem; color:var(--text-2); text-align:center; padding:.85rem 0 .4rem; letter-spacing:.04em }
.cert-nav { display:flex; align-items:center; justify-content:center; gap:1.5rem; margin-top:14px; width:100%; }
.cert-arrow {
  width:44px; height:44px; border-radius:50%;
  font-size:1.15rem; line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-body);
  color:rgba(255,255,255,0.75);
  background:rgba(255,255,255,0.07);
  backdrop-filter:blur(32px) saturate(180%);
  -webkit-backdrop-filter:blur(32px) saturate(180%);
  border-top:1px solid rgba(255,255,255,0.28);
  border-left:1px solid rgba(255,255,255,0.12);
  border-right:1px solid rgba(255,255,255,0.09);
  border-bottom:1px solid rgba(0,0,0,0.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), 0 4px 16px rgba(0,0,0,0.35);
  transition:transform 0.22s cubic-bezier(0.16,1,0.3,1), background 0.22s, box-shadow 0.22s, border-color 0.22s, color 0.22s;
  position:relative; overflow:hidden;
}
.cert-arrow::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,0.12) 0%,transparent 100%);
  border-radius:50% 50% 0 0;
  pointer-events:none;
}
.cert-arrow:hover {
  transform:scale(1.12);
  color:var(--accent);
  background:rgba(46,204,138,0.15);
  border-top-color:rgba(46,204,138,0.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), 0 0 22px rgba(46,204,138,0.35), 0 6px 20px rgba(0,0,0,0.4);
}
.cert-arrow:active { transform:scale(0.95); }
.cert-arrow:disabled { opacity:.2; cursor:not-allowed; transform:none !important; box-shadow:none; }
.cert-dots { display:flex; gap:7px; align-items:center }
.cert-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.18); cursor:pointer; transition:all .25s; border:none; padding:0 }
.cert-dot.active { background:var(--accent); width:20px; border-radius:4px; box-shadow:0 0 8px rgba(46,204,138,0.55) }

/* =====================================================
   PORTFOLIO — Tabs + Carousel
   ===================================================== */
.portfolio { background:transparent }

.pf-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:44px }
.pf-tab { border-radius:14px; padding:10px 20px; color:var(--text-2); font-family:var(--ff-body); font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:all .22s; background:rgba(255,255,255,0.04); backdrop-filter:blur(20px); border-top:1px solid rgba(255,255,255,0.12); border-left:1px solid rgba(255,255,255,0.06); border-right:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.14); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06) }
.pf-tab:hover { color:var(--text); background:rgba(255,255,255,0.08); border-top-color:rgba(255,255,255,0.2) }
.pf-tab.active { background:rgba(46,204,138,0.1); backdrop-filter:blur(24px); color:var(--accent); border-top-color:rgba(46,204,138,0.45); border-left-color:rgba(46,204,138,0.22); border-right-color:rgba(46,204,138,0.16); border-bottom-color:rgba(0,0,0,0.16); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 0 24px rgba(46,204,138,0.14) }
.pf-panel { display:none }
.pf-panel.active { display:block }

.car-wrapper { position:relative; max-width:1000px; margin:0 auto; padding:0 56px; }
.car-wrapper::after { content:''; position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); width:50%; height:1px; background:linear-gradient(90deg,transparent,rgba(46,204,138,0.55),transparent) }
.car-track { overflow:hidden; border-radius:22px }
.car-slide { display:none; flex-direction:column; animation:carFadeIn .35s ease }
.car-slide.active { display:flex }
@keyframes carFadeIn { from{opacity:0;transform:scale(0.985)} to{opacity:1;transform:scale(1)} }

.car-pair { display:flex; gap:12px; align-items:stretch }
.car-col { flex:1; border-radius:18px; overflow:hidden; position:relative; min-height:320px; transition:box-shadow .35s; background:rgba(5,6,10,0.5); backdrop-filter:blur(20px); border-top:1px solid rgba(255,255,255,0.12); border-left:1px solid rgba(255,255,255,0.06); border-right:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.2); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 32px rgba(0,0,0,0.4) }
.car-col:hover { border-top-color:rgba(46,204,138,0.3); box-shadow:inset 0 1px 0 rgba(46,204,138,0.1), 0 0 50px rgba(46,204,138,0.18), 0 0 0 1px rgba(46,204,138,0.14) }
.car-col .pf-video-wrap { aspect-ratio:3/4; }
.car-col-label { position:absolute; top:10px; left:10px; z-index:3; padding:4px 11px; border-radius:9px; font-size:.65rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.8); background:rgba(5,6,10,0.6); backdrop-filter:blur(16px); border-top:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.1); border-right:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(0,0,0,0.18); box-shadow:inset 0 1px 0 rgba(255,255,255,0.1) }
.car-desc { font-size:.87rem; color:var(--text-2); line-height:1.72; padding:14px 2px 2px; border-top:1px solid rgba(255,255,255,0.06); margin-top:12px }

.car-single { flex-direction:column; align-items:center }
.car-col-single { max-width:460px; width:100%; border-radius:18px; overflow:hidden; position:relative; min-height:340px; transition:box-shadow .35s; background:rgba(5,6,10,0.5); backdrop-filter:blur(20px); border-top:1px solid rgba(255,255,255,0.12); border-left:1px solid rgba(255,255,255,0.06); border-right:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.2); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 32px rgba(0,0,0,0.4) }
.car-col-single:hover { border-top-color:rgba(46,204,138,0.3); box-shadow:inset 0 1px 0 rgba(46,204,138,0.1), 0 0 50px rgba(46,204,138,0.18) }
.car-col-single img { width:100%; height:100%; object-fit:contain; display:block }

.car-sketches { display:flex; gap:10px; flex-wrap:wrap; justify-content:center }
.car-sketch { border-radius:16px; overflow:hidden; min-height:260px; transition:box-shadow .35s; background:rgba(5,6,10,0.5); backdrop-filter:blur(20px); border-top:1px solid rgba(255,255,255,0.1); border-left:1px solid rgba(255,255,255,0.05); border-right:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(0,0,0,0.18); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.35) }
.car-sketch:hover { border-top-color:rgba(46,204,138,0.28); box-shadow:inset 0 1px 0 rgba(46,204,138,0.08), 0 0 36px rgba(46,204,138,0.16) }
.car-sketch img { width:100%; height:100%; object-fit:contain; display:block }
.car-sketches-3 .car-sketch { width:calc(33.33% - 7px) }
.car-sketches-2 .car-sketch { width:calc(50% - 5px) }
.car-sketches-1 .car-sketch { width:100% }

.car-evideo { flex-direction:column }
.car-evideo-title { font-family:var(--ff-display); font-size:1.25rem; font-weight:600; color:var(--text); margin-bottom:14px }
.car-evideo-wrap { width:100%; border-radius:18px; overflow:hidden; transition:box-shadow .35s; border-top:1px solid rgba(255,255,255,0.1); border-left:1px solid rgba(255,255,255,0.05); border-right:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(0,0,0,0.2); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 40px rgba(0,0,0,0.5) }
.car-evideo-wrap:hover { border-top-color:rgba(46,204,138,0.25); box-shadow:inset 0 1px 0 rgba(46,204,138,0.08), 0 0 48px rgba(46,204,138,0.14) }
.car-evideo-desc { font-size:.87rem; color:var(--text-2); line-height:1.72; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.06) }

.car-nav { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; width:100%; }
.car-nav .car-arrow:first-of-type { position:absolute; left:0; top:42%; transform:translateY(-50%); }
.car-nav .car-arrow:last-of-type  { position:absolute; right:0; top:42%; transform:translateY(-50%); }
.car-arrow {
  width:52px; height:52px; border-radius:50%;
  font-size:1.55rem; line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-body);
  color:rgba(255,255,255,0.78);
  background:rgba(255,255,255,0.07);
  backdrop-filter:blur(32px) saturate(200%);
  -webkit-backdrop-filter:blur(32px) saturate(200%);
  border-top:1px solid rgba(255,255,255,0.3);
  border-left:1px solid rgba(255,255,255,0.13);
  border-right:1px solid rgba(255,255,255,0.09);
  border-bottom:1px solid rgba(0,0,0,0.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 24px rgba(0,0,0,0.4);
  transition:transform 0.22s cubic-bezier(0.16,1,0.3,1), background 0.22s, box-shadow 0.22s, border-color 0.22s, color 0.22s;
  position:relative; overflow:hidden;
}
.car-arrow::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,0.14) 0%,transparent 100%);
  border-radius:50% 50% 0 0;
  pointer-events:none;
}
.car-arrow:hover {
  transform:scale(1.12);
  color:var(--accent);
  background:rgba(46,204,138,0.15);
  border-top-color:rgba(46,204,138,0.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 0 28px rgba(46,204,138,0.42),
    0 8px 28px rgba(0,0,0,0.45);
}
.car-arrow:active { transform:scale(0.95); }
.car-arrow:disabled { opacity:.2; cursor:not-allowed; transform:none !important; box-shadow:none; }
.car-counter { font-size:.78rem; font-weight:600; color:var(--text-3); letter-spacing:.5px; min-width:52px; text-align:center }
.car-dots { display:flex; gap:7px; align-items:center }
.car-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.18); cursor:pointer; transition:all .25s; border:none; padding:0 }
.car-dot.active { background:var(--accent); width:22px; border-radius:4px; box-shadow:0 0 10px rgba(46,204,138,0.55) }

.art-watermark { position:absolute; bottom:.8rem; right:.8rem; z-index:2; padding:.25rem .65rem; border-radius:8px; font-family:var(--ff-display); font-size:.68rem; font-weight:700; letter-spacing:.15em; color:var(--accent); background:rgba(5,6,10,0.65); backdrop-filter:blur(16px); border-top:1px solid rgba(46,204,138,0.3); border-left:1px solid rgba(46,204,138,0.15); border-right:1px solid rgba(46,204,138,0.1); border-bottom:1px solid rgba(0,0,0,0.18); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08) }

.pf-video-wrap { position:relative }
.pf-video-wrap::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#08090f 25%,#12151e 50%,#08090f 75%); background-size:200% 100%; animation:shimmer 1.8s infinite; border-radius:8px; z-index:0 }
.pf-video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; z-index:1 }
.pf-video-wrap.loaded::before { display:none }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.pf-video-wrap--wide { aspect-ratio:16/9; width:100%; position:relative }
.pf-video-wrap--wide iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block }
.vid-play-overlay { position:absolute; inset:0; background-size:contain; background-position:center; background-repeat:no-repeat; background-color:#08090f; display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:inherit; z-index:2 }
.vid-play-btn { width:72px; height:72px; border-radius:50%; background:rgba(5,6,10,0.6); backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,0.28); border-left:1px solid rgba(255,255,255,0.14); border-right:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(0,0,0,0.2); box-shadow:inset 0 1px 0 rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; color:#fff; transition:transform .2s,background .2s; padding-left:5px }
.vid-play-overlay:hover .vid-play-btn { transform:scale(1.12); background:rgba(46,204,138,0.75); border-top-color:rgba(255,255,255,0.5) }

@media(max-width:768px) { .car-pair{flex-direction:column} .car-col{ width:100%; min-height:unset; } .car-col .pf-video-wrap{ width:100%; aspect-ratio:16/9; position:relative; display:block; overflow:hidden; height:auto; } .car-sketches-3 .car-sketch{width:calc(50% - 5px)} .car-sketches-3 .car-sketch:last-child{width:100%} }
@media(max-width:480px) { .car-sketches-3 .car-sketch,.car-sketches-2 .car-sketch{width:100%} .pf-tab{padding:8px 14px;font-size:.72rem} }

/* =====================================================
   HOW IT WORKS
   ===================================================== */
.howitworks { background:transparent }
.hiw-intro { font-size:1.05rem; color:var(--text-2); max-width:560px; margin-bottom:4rem }
.hiw-grid { display:flex; gap:0; position:relative }
.hiw-grid::before { content:''; position:absolute; top:44px; left:calc(100%/8); right:calc(100%/8); height:1px; background:linear-gradient(90deg,transparent,var(--accent-border),var(--accent-border),var(--accent-border),transparent) }
.hiw-step { flex:1; padding:0 1.5rem; text-align:center; position:relative }
.hiw-number { font-family:var(--ff-display); font-size:.75rem; font-weight:700; letter-spacing:.15em; color:var(--accent); margin-bottom:1rem }
.hiw-icon-wrap { width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; font-size:1.5rem; position:relative; z-index:1; background:rgba(255,255,255,0.05); backdrop-filter:blur(24px); border-top:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.1); border-right:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(0,0,0,0.18); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 1px rgba(46,204,138,0.14) }
.hiw-title { font-family:var(--ff-display); font-size:1.15rem; font-weight:600; color:var(--text); margin-bottom:.5rem }
.hiw-desc { font-size:.875rem; color:var(--text-2); line-height:1.72; text-align:left }
.hiw-connector { color:var(--accent); font-size:1.5rem; display:flex; align-items:center; padding-top:44px; opacity:.45; flex-shrink:0 }
.hiw-note { display:flex; gap:1rem; border-radius:var(--r-xl); padding:1.5rem 1.8rem; margin-top:4rem; align-items:flex-start; background:rgba(46,204,138,0.06); backdrop-filter:blur(28px); border-top:1px solid rgba(46,204,138,0.28); border-left:1px solid rgba(46,204,138,0.14); border-right:1px solid rgba(46,204,138,0.1); border-bottom:1px solid rgba(0,0,0,0.16); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.3) }
.hiw-note span { font-size:1.3rem; flex-shrink:0; margin-top:.1rem }
.hiw-note p { font-size:.9rem; color:var(--text-2); line-height:1.75 }

@media(max-width:820px) { .hiw-grid{flex-direction:column;gap:0} .hiw-grid::before{display:none} .hiw-connector{display:none} .hiw-step{display:flex;gap:1.5rem;text-align:left;padding:1.5rem 0;border-bottom:1px solid rgba(255,255,255,0.05);align-items:flex-start} .hiw-icon-wrap{flex-shrink:0;margin:0} .hiw-number{margin-bottom:.3rem} }

/* =====================================================
   SERVICES
   ===================================================== */
.services { background:transparent }
.services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem; margin:3rem 0 }
.service-card { border-radius:var(--r-2xl); padding:2rem; position:relative; overflow:hidden; transition:transform var(--t-s),box-shadow var(--t-s),border-color var(--t-s); background:rgba(255,255,255,0.04); backdrop-filter:blur(40px) saturate(180%); -webkit-backdrop-filter:blur(40px) saturate(180%); border-top:1px solid rgba(255,255,255,0.14); border-left:1px solid rgba(255,255,255,0.07); border-right:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.18); box-shadow:inset 0 1px 0 rgba(255,255,255,0.09), 0 8px 40px rgba(0,0,0,0.4) }
.service-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at top left,rgba(46,204,138,0.07),transparent 60%); opacity:0; transition:opacity var(--t-s); pointer-events:none }
.service-card:hover { transform:translateY(-5px); border-top-color:rgba(46,204,138,0.35); box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 24px 64px rgba(0,0,0,0.55), 0 0 36px rgba(46,204,138,0.1) }
.service-card:hover::before { opacity:1 }
.service-card--featured { background:linear-gradient(135deg,rgba(46,204,138,0.07),rgba(255,255,255,0.04)); border-top-color:rgba(46,204,138,0.32); box-shadow:inset 0 1px 0 rgba(255,255,255,0.1), 0 12px 48px rgba(0,0,0,0.45), 0 0 32px rgba(46,204,138,0.08) }
.service-card--wide { grid-column:1/-1 }
.service-badge { display:inline-block; background:var(--accent); color:#05060a; font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.28rem .75rem; border-radius:100px; margin-bottom:1rem; box-shadow:0 0 12px rgba(46,204,138,0.35), inset 0 1px 0 rgba(255,255,255,0.3) }
.service-icon { font-size:2rem; margin-bottom:1rem }
.service-name { font-family:var(--ff-display); font-size:1.35rem; font-weight:600; color:var(--text); margin-bottom:.5rem }
.service-desc { font-size:.875rem; color:var(--text-2); line-height:1.72; margin-bottom:1.2rem }
.service-price { margin-bottom:1.2rem; padding-bottom:1.2rem; border-bottom:1px solid rgba(255,255,255,0.06) }
.price-main { display:block; font-family:var(--ff-display); font-size:2.2rem; font-weight:600; color:var(--text); line-height:1.1 }
.price-usd { font-size:.85rem; color:var(--text-3) }
.price-note { display:block; font-size:.75rem; color:var(--text-3); margin-top:.3rem }
.service-details { margin-bottom:1rem }
.service-details li { font-size:.84rem; color:var(--text-2); padding:.3rem 0; display:flex; align-items:center; gap:.5rem; border-bottom:1px solid rgba(255,255,255,0.04) }
.service-details li::before { content:''; width:4px; height:4px; background:var(--accent); border-radius:50%; flex-shrink:0; box-shadow:0 0 5px rgba(46,204,138,0.5) }
.turnaround { font-size:.78rem; color:var(--text-3); margin-bottom:1.2rem }
.turnaround strong { color:var(--text-2) }
.delivery-info { display:grid; grid-template-columns:1fr 1fr; gap:2rem; border-radius:var(--r-2xl); padding:2rem; margin:2rem 0; background:rgba(255,255,255,0.03); backdrop-filter:blur(32px); border-top:1px solid rgba(255,255,255,0.12); border-left:1px solid rgba(255,255,255,0.06); border-right:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(0,0,0,0.18); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 32px rgba(0,0,0,0.35) }
.delivery-col h3 { font-family:var(--ff-display); font-size:1.2rem; font-weight:600; color:var(--text); margin-bottom:1rem }
.delivery-col p,.delivery-col ul li { font-size:.875rem; color:var(--text-2); line-height:1.72 }
.delivery-col ul { margin:.5rem 0 1rem 0 }
.delivery-col ul li { display:flex; align-items:center; gap:.5rem; padding:.2rem 0 }
.delivery-col ul li::before { content:''; width:4px; height:4px; background:var(--accent); border-radius:50%; flex-shrink:0 }
.note { font-size:.8rem; color:var(--text-3); margin-top:.5rem }
.preferred-badge { font-size:.65rem; color:var(--accent); font-weight:600; letter-spacing:.05em; margin-left:.3rem; padding:.15rem .55rem; border-radius:100px; background:rgba(46,204,138,0.1); border:1px solid rgba(46,204,138,0.25) }
.services-notice { display:flex; gap:1rem; border-radius:var(--r-lg); padding:1.25rem 1.5rem; margin-top:1rem; align-items:flex-start; background:rgba(255,255,255,0.03); backdrop-filter:blur(24px); border-top:1px solid rgba(255,255,255,0.1); border-left:1px solid rgba(255,255,255,0.05); border-right:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(0,0,0,0.14); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06) }
.notice-icon { font-size:1.2rem; flex-shrink:0; margin-top:.1rem }
.services-notice p { font-size:.875rem; color:var(--text-2); line-height:1.72 }
.services-notice strong { color:var(--text) }

@media(max-width:600px) { .delivery-info{grid-template-columns:1fr} .services-grid{grid-template-columns:1fr} .service-card--wide{grid-column:1} }

/* =====================================================
   FAQ
   ===================================================== */
.faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column }
.faq-item { border-bottom:1px solid rgba(255,255,255,0.06) }
.faq-item:first-child { border-top:1px solid rgba(255,255,255,0.06) }
.faq-q { width:100%; background:none; border:none; cursor:pointer; text-align:left; color:inherit; font-family:inherit; font-size:1rem; font-weight:600; padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; transition:color .2s }
.faq-q:hover,.faq-q[aria-expanded="true"] { color:var(--accent) }
.faq-chevron { font-size:1.4rem; font-weight:300; flex-shrink:0; transition:transform .3s ease; display:inline-block; line-height:1 }
.faq-q[aria-expanded="true"] .faq-chevron { transform:rotate(45deg) }
.faq-a { overflow:hidden; max-height:0; transition:max-height .35s ease,padding .25s ease; padding-bottom:0 }
.faq-a:not([hidden]) { max-height:300px; padding-bottom:22px }
.faq-a[hidden] { display:block !important }
.faq-a p { color:rgba(255,255,255,.65); line-height:1.8; font-size:.95rem; margin:0 }

/* =====================================================
   TESTIMONIALS
   ===================================================== */
.testimonials { background:transparent; overflow:hidden }
.testi-marquee-section { margin-top:2.5rem; display:flex; flex-direction:column; gap:1rem }
.testi-marquee-row { overflow:hidden; mask-image:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%); -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%) }
.testi-marquee-track { display:flex; gap:1rem; width:max-content; animation:marqLeft 55s linear infinite }
.testi-marquee-track--rev { animation:marqRight 55s linear infinite }
.testi-marquee-row:hover .testi-marquee-track,.testi-marquee-row:hover .testi-marquee-track--rev { animation-play-state:paused }
@keyframes marqLeft  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
@keyframes marqRight { from{transform:translateX(-50%)} to{transform:translateX(0)}    }

.testi-card { min-width:290px; max-width:330px; flex-shrink:0; border-radius:var(--r-xl); padding:1.5rem 1.6rem; position:relative; overflow:hidden; cursor:default; transition:transform var(--t-s),box-shadow var(--t-s),border-color var(--t-s); background:rgba(255,255,255,0.045); backdrop-filter:blur(40px) saturate(180%); -webkit-backdrop-filter:blur(40px) saturate(180%); border-top:1px solid rgba(255,255,255,0.14); border-left:1px solid rgba(255,255,255,0.07); border-right:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.16); box-shadow:inset 0 1px 0 rgba(255,255,255,0.09), 0 8px 32px rgba(0,0,0,0.4) }
.testi-card::before { content:'\201C'; position:absolute; top:-8px; left:14px; font-family:var(--ff-display); font-size:5rem; color:rgba(46,204,138,0.14); line-height:1; pointer-events:none }
.testi-card:hover { border-top-color:rgba(46,204,138,0.3); transform:translateY(-3px); box-shadow:inset 0 1px 0 rgba(46,204,138,0.1), 0 16px 48px rgba(0,0,0,0.5), 0 0 28px rgba(46,204,138,0.1) }
.testi-stars  { font-size:.75rem; letter-spacing:2px; color:var(--accent); margin-bottom:.6rem; opacity:.8 }
.testi-quote  { font-size:.88rem; color:var(--text); line-height:1.72; margin-bottom:.85rem; font-style:italic; position:relative; z-index:1 }
.testi-name   { display:block; font-size:.78rem; font-weight:600; color:var(--accent); letter-spacing:.04em }
.testi-source { display:block; font-size:.7rem; color:var(--text-3); margin-top:.2rem; letter-spacing:.06em; text-transform:uppercase }
.testi-stat { text-align:center; margin-top:3.5rem; padding:2.5rem; max-width:500px; margin-left:auto; margin-right:auto; border-radius:var(--r-2xl); background:rgba(46,204,138,0.07); backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px); border-top:1px solid rgba(46,204,138,0.32); border-left:1px solid rgba(46,204,138,0.16); border-right:1px solid rgba(46,204,138,0.12); border-bottom:1px solid rgba(0,0,0,0.18); box-shadow:inset 0 1px 0 rgba(255,255,255,0.1), 0 0 60px rgba(46,204,138,0.1), 0 12px 48px rgba(0,0,0,0.45) }
.testi-stat-num { display:block; font-family:var(--ff-display); font-size:4rem; font-weight:600; color:var(--accent); line-height:1; text-shadow:0 0 40px rgba(46,204,138,0.4) }
.testi-stat-label { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-top:.5rem; display:block }
@media(prefers-reduced-motion:reduce) { .testi-marquee-track,.testi-marquee-track--rev{animation:none} }

/* =====================================================
   INQUIRY FORM
   ===================================================== */
.inquiry { background:transparent }
.inquiry-wrap { max-width:780px }
.inquiry-intro { color:var(--text-2); font-size:1.05rem; line-height:1.75; margin-bottom:3rem }
.inquiry-intro a { color:var(--accent) }
.inquiry-intro a:hover { color:var(--accent-bright) }
.inquiry-form { display:flex; flex-direction:column; gap:1.25rem }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem }
@media(max-width:600px) { .form-row{grid-template-columns:1fr} }
.form-group { display:flex; flex-direction:column; gap:.5rem }
.form-label { font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2) }
.req { color:var(--accent) }
.form-input { width:100%; padding:.9rem 1.1rem; font-family:var(--ff-body); font-size:.95rem; color:var(--text); border-radius:var(--r-lg); outline:none; transition:border-color .2s,box-shadow .2s; background:rgba(255,255,255,0.045); backdrop-filter:blur(20px); border-top:1px solid rgba(255,255,255,0.12); border-left:1px solid rgba(255,255,255,0.06); border-right:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.18); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06) }
.form-input::placeholder { color:var(--text-3) }
.form-input:focus { border-top-color:rgba(46,204,138,0.5); border-left-color:rgba(46,204,138,0.25); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 3px rgba(46,204,138,0.12), 0 8px 24px rgba(0,0,0,0.35); background:rgba(46,204,138,0.04) }
.form-select { cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a09c97' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1.1rem center; padding-right:2.5rem }
.form-select option { background:#0c0e12; color:var(--text) }
.form-textarea { min-height:130px; resize:vertical }
.form-notice { display:flex; gap:.85rem; align-items:flex-start; padding:1.1rem 1.3rem; border-radius:var(--r-lg); font-size:.875rem; background:rgba(46,204,138,0.06); backdrop-filter:blur(20px); border-top:1px solid rgba(46,204,138,0.25); border-left:1px solid rgba(46,204,138,0.12); border-right:1px solid rgba(46,204,138,0.09); border-bottom:1px solid rgba(0,0,0,0.14); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07) }
.form-notice span { font-size:1rem; flex-shrink:0; margin-top:.1rem }
.form-notice p { color:var(--text-2); line-height:1.7; margin:0 }
.form-notice strong { color:var(--text) }
.form-submit { align-self:flex-start; display:flex; align-items:center; gap:.6rem; padding:.95rem 2.5rem }
.form-submit-icon { font-size:1.1rem; transition:transform .2s }
.form-submit:hover .form-submit-icon { transform:translateX(4px) }

/* =====================================================
   CONTACT
   ===================================================== */
.contact { background:transparent }
.contact-wrap { max-width:760px }
.contact-intro { color:var(--text-2); margin-bottom:3rem; font-size:1.05rem; line-height:1.75 }
.contact-intro strong { color:var(--text) }
.contact-cards { display:grid; gap:.7rem }
.contact-card { display:flex; align-items:center; gap:1.2rem; border-radius:var(--r-xl); padding:1.2rem 1.5rem; color:var(--text); text-decoration:none; transition:transform var(--t-s),box-shadow var(--t-s),border-color var(--t-s); background:rgba(255,255,255,0.04); backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px); border-top:1px solid rgba(255,255,255,0.12); border-left:1px solid rgba(255,255,255,0.06); border-right:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(0,0,0,0.16); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 4px 20px rgba(0,0,0,0.3) }
.contact-card:hover { transform:translateX(7px); color:var(--text); border-top-color:rgba(46,204,138,0.32); box-shadow:inset 0 1px 0 rgba(46,204,138,0.12), 0 12px 40px rgba(0,0,0,0.45), 0 0 28px rgba(46,204,138,0.1) }
.contact-card-icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0; transition:background .2s,border-color .2s; background:rgba(46,204,138,0.08); backdrop-filter:blur(16px); border-top:1px solid rgba(46,204,138,0.25); border-left:1px solid rgba(46,204,138,0.12); border-right:1px solid rgba(46,204,138,0.09); border-bottom:1px solid rgba(0,0,0,0.14); box-shadow:inset 0 1px 0 rgba(255,255,255,0.1) }
.contact-card:hover .contact-card-icon { background:rgba(46,204,138,0.14); border-top-color:rgba(46,204,138,0.4); box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 0 12px rgba(46,204,138,0.2) }
.contact-card-icon svg { width:20px; height:20px }
.contact-card-text { flex:1; min-width:0 }
.contact-card-label { display:block; font-size:.75rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--text-2); margin-bottom:.15rem }
.contact-card-handle { display:block; font-size:.95rem; color:var(--text); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.contact-card-arrow { color:var(--text-3); font-size:1.1rem; transition:color var(--t),transform var(--t); flex-shrink:0 }
.contact-card:hover .contact-card-arrow { color:var(--accent); transform:translateX(5px) }

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer { border-top:1px solid rgba(255,255,255,0.06); padding:4rem 0 2rem; background:transparent }
.footer-inner { max-width:var(--max-w); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); display:grid; gap:1.5rem }
.footer-logo { font-family:var(--ff-display); font-size:1.5rem; font-weight:600; color:var(--text); letter-spacing:.04em; transition:color var(--t) }
.footer-logo:hover { color:var(--accent) }
.footer-tagline { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3) }
.footer-nav { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem }
.footer-nav a { font-size:.78rem; color:var(--text-2); letter-spacing:.05em; transition:color var(--t) }
.footer-nav a:hover { color:var(--accent) }
.footer-social { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem }
.footer-social a { font-size:.78rem; color:var(--text-3); letter-spacing:.05em; transition:color var(--t) }
.footer-social a:hover { color:var(--accent) }
.footer-copy { font-size:.72rem; color:var(--text-3); border-top:1px solid rgba(255,255,255,0.05); padding-top:1.5rem; margin-top:.5rem }

/* =====================================================
   BACK TO TOP
   ===================================================== */
.back-to-top { position:fixed; bottom:2rem; right:2rem; width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1rem; opacity:0; pointer-events:none; transition:opacity var(--t-s),transform var(--t-s),box-shadow var(--t-s); z-index:800; text-decoration:none; color:var(--text-2); background:rgba(255,255,255,0.06); backdrop-filter:blur(24px); border-top:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.1); border-right:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(0,0,0,0.18); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 28px rgba(0,0,0,0.4) }
.back-to-top.visible { opacity:1; pointer-events:auto }
.back-to-top:hover { color:var(--accent); transform:translateY(-3px); border-top-color:rgba(46,204,138,0.4); box-shadow:inset 0 1px 0 rgba(46,204,138,0.18), 0 12px 36px rgba(0,0,0,0.5), 0 0 20px rgba(46,204,138,0.2) }
@media(max-width:768px) { .back-to-top { display:none } }

/* =====================================================
   FLOAT COMMISSION BUTTON
   ===================================================== */
.float-commission { display:none; position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:888; padding:14px 32px; border-radius:100px; font-weight:700; font-size:.92rem; text-decoration:none; letter-spacing:.05em; color:#05060a; white-space:nowrap; transition:transform .2s ease,box-shadow .2s ease,opacity .3s ease; background:linear-gradient(135deg,#2ECC8A,#1aab6d); border-top:1px solid rgba(255,255,255,0.35); box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 32px rgba(46,204,138,0.5), 0 0 0 1px rgba(0,0,0,0.2) }
.float-commission:hover { transform:translateX(-50%) translateY(-3px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 14px 40px rgba(46,204,138,0.6) }
.float-commission.hide { opacity:0; pointer-events:none }
@media(max-width:768px) { .float-commission { display:flex; align-items:center; gap:8px } }

/* =====================================================
   SCROLL FADE-IN
   ===================================================== */
.fade-in { opacity:0; transform:translateY(30px); transition:opacity .75s ease,transform .75s ease }
.fade-in.visible { opacity:1; transform:none }

/* =====================================================
   PROGRESS BAR
   ===================================================== */
.progress-bar { position:fixed; top:0; left:0; height:2px; z-index:1000; transform-origin:left; transform:scaleX(0); transition:transform .1s linear; will-change:transform; background:linear-gradient(90deg,var(--accent),#5fffb8); box-shadow:0 0 12px rgba(46,204,138,0.7) }

/* =====================================================
   COPY TOAST
   ===================================================== */
.copy-toast { position:fixed; bottom:5rem; left:50%; transform:translateX(-50%) translateY(12px); color:#05060a; font-family:var(--ff-body); font-size:.82rem; font-weight:700; letter-spacing:.04em; padding:.65rem 1.5rem; border-radius:100px; opacity:0; pointer-events:none; transition:opacity .25s ease,transform .25s ease; z-index:1200; white-space:nowrap; background:linear-gradient(135deg,#2ECC8A,#1aab6d); border-top:1px solid rgba(255,255,255,0.35); box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), 0 12px 36px rgba(46,204,138,0.45) }
.copy-toast.show { opacity:1; transform:translateX(-50%) translateY(0) }


/* =====================================================
   RESPONSIVE ≤600px
   ===================================================== */
@media(max-width:600px) {
  .hero-content { padding-bottom:1.5rem }
  .hero-stats { gap:1.5rem }
  .stat-num { font-size:2rem }
  .hero-actions { flex-direction:column }
  .btn { width:100%; justify-content:center }
  .about-img { max-width:100%; aspect-ratio:4/3 }
  .about-badge { bottom:-12px; right:8px }
  .skills-block { grid-template-columns:1fr }
  .contact-card { gap:.9rem; padding:1rem 1.2rem }
}

/* =====================================================
   REDUCED MOTION
   ===================================================== */
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important} }

/* =====================================================
   PRINT
   ===================================================== */
@media print { .site-header,.back-to-top,.hero-scroll-hint,.hero-bg,.hero-grain{display:none} body{background:#fff;color:#000} }

/* =====================================================
   SERVICE COVERFLOW CAROUSEL
   ===================================================== */
.svc-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 4rem 0 1.8rem;
  margin-top: 2rem;
  border-radius: 32px;
  background:
    radial-gradient(ellipse 90% 80% at 50% 50%, rgba(46,204,138,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 15% 85%, rgba(14,165,233,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 55% 55% at 85% 15%, rgba(46,204,138,0.06) 0%, transparent 55%),
    rgba(255,255,255,0.018);
}

/* Side fade masks */
.svc-fade {
  position: absolute; top: 0; bottom: 80px;
  width: 22%; pointer-events: none; z-index: 5;
}
.svc-fade--left  { left:  0; background: linear-gradient(90deg,  rgba(3,4,7,0.90) 0%, rgba(3,4,7,0.45) 38%, transparent 100%); }
.svc-fade--right { right: 0; background: linear-gradient(270deg, rgba(3,4,7,0.90) 0%, rgba(3,4,7,0.45) 38%, transparent 100%); }

/* Track: all cards laid out horizontally, centered */
.svc-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  min-height: 540px;
  perspective: 1200px;
}

/* Each card: absolute positioning driven by JS data-pos */
.svc-card {
  position: absolute;
  width: clamp(260px, 36vw, 360px);
  cursor: pointer;
  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1),
              opacity  0.45s ease,
              filter   0.45s ease,
              z-index  0s;
  user-select: none;
  -webkit-user-select: none;
}

/* Position states set by JS */
.svc-card[data-pos="active"] {
  transform: translateX(0) scale(1);
  opacity: 1;
  filter: blur(0px);
  z-index: 4;
  cursor: default;
}
.svc-card[data-pos="prev1"] {
  transform: translateX(-62%) scale(0.82);
  opacity: 0.55;
  filter: blur(2.5px);
  z-index: 3;
}
.svc-card[data-pos="next1"] {
  transform: translateX(62%) scale(0.82);
  opacity: 0.55;
  filter: blur(2.5px);
  z-index: 3;
}
.svc-card[data-pos="prev2"] {
  transform: translateX(-112%) scale(0.68);
  opacity: 0.25;
  filter: blur(5px);
  z-index: 2;
}
.svc-card[data-pos="next2"] {
  transform: translateX(112%) scale(0.68);
  opacity: 0.25;
  filter: blur(5px);
  z-index: 2;
}
.svc-card[data-pos="hidden"] {
  transform: translateX(140%) scale(0.6);
  opacity: 0;
  filter: blur(8px);
  z-index: 1;
  pointer-events: none;
}
.svc-card[data-pos="hidden-left"] {
  transform: translateX(-140%) scale(0.6);
  opacity: 0;
  filter: blur(8px);
  z-index: 1;
  pointer-events: none;
}

/* Card inner: the glass card itself */
.svc-card-inner {
  border-radius: 28px;
  padding: 2rem 1.8rem;
  position: relative;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(48px) saturate(200%) brightness(1.08);
  -webkit-backdrop-filter: blur(48px) saturate(200%) brightness(1.08);
  border-top:    1px solid rgba(255,255,255,0.22);
  border-left:   1px solid rgba(255,255,255,0.10);
  border-right:  1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(0,0,0,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 32px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}
/* Top gloss on card */
.svc-card-inner::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.09) 0%, transparent 100%);
  border-radius: 28px 28px 0 0;
  pointer-events: none;
}
/* Active card gets accent glow */
.svc-card[data-pos="active"] .svc-card-inner {
  border-top-color: rgba(46,204,138,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 40px 100px rgba(0,0,0,0.65),
    0 0 60px rgba(46,204,138,0.14),
    0 0 0 1px rgba(46,204,138,0.12);
}

.svc-badge {
  display: inline-block;
  background: var(--accent);
  color: #05060a;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .26rem .75rem;
  border-radius: 100px;
  margin-bottom: 0;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(46,204,138,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.svc-icon { font-size: 2.2rem; margin-bottom: .85rem; display: block; }
.svc-name {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .5rem;
  line-height: 1.15;
}
.svc-desc {
  font-size: .875rem;
  color: var(--text-2);
  line-height: 1.72;
  margin-bottom: 1.1rem;
}
.svc-price { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.svc-price-main {
  display: block;
  font-family: var(--ff-display);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}
.svc-price-usd  { font-size: .82rem; color: var(--text-3); margin-left: .2rem; }
.svc-price-note { display: block; font-size: .72rem; color: var(--text-3); margin-top: .25rem; }
.svc-details {
  margin-bottom: .85rem;
  display: flex; flex-direction: column; gap: .22rem;
}
.svc-details li {
  font-size: .82rem;
  color: var(--text-2);
  padding: .22rem 0;
  display: flex; align-items: center; gap: .45rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.svc-details li::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(46,204,138,0.5);
}
.svc-turnaround {
  font-size: .78rem;
  color: var(--text-3);
  margin-bottom: .35rem;
}
.svc-turnaround strong { color: var(--text-2); }
.svc-btn { margin-top: 1rem; }

/* Controls */
.svc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  position: relative;
  z-index: 10;
  gap: 16px;
}
.svc-arrow {
  width: 52px; height: 52px;
  border-radius: 50%;
  font-size: 1.55rem;
  line-height: 1;
  font-family: var(--ff-body);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border-top:    1px solid rgba(255,255,255,0.3);
  border-left:   1px solid rgba(255,255,255,0.13);
  border-right:  1px solid rgba(255,255,255,0.09);
  border-bottom: 1px solid rgba(0,0,0,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 24px rgba(0,0,0,0.4);
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), background 0.22s, box-shadow 0.22s, border-color 0.22s, color 0.22s;
  position: relative; overflow: hidden;
}
.svc-arrow::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 100%);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}
.svc-arrow:hover {
  transform: scale(1.12);
  color: var(--accent);
  background: rgba(46,204,138,0.15);
  border-top-color: rgba(46,204,138,0.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 0 28px rgba(46,204,138,0.42),
    0 8px 28px rgba(0,0,0,0.45);
}
.svc-arrow:active { transform: scale(0.95); }
.svc-arrow:disabled {
  opacity: 0.18;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}
.svc-side-prev,
.svc-side-next {
  /* default: inline inside svc-controls flex row */
  position: static;
  transform: none;
  z-index: 15;
}
@media(min-width:641px) {
  /* On desktop: pull arrows out of controls row and anchor to carousel */
  .svc-carousel { position: relative; }
  .svc-side-prev,
  .svc-side-next {
    position: absolute;
    top: calc(4rem + 250px);
    transform: translateY(-50%);
    z-index: 15;
  }
  .svc-side-prev { left: 1.5rem; }
  .svc-side-next { right: 1.5rem; }
}
.svc-dots {
  display: flex; gap: 8px; align-items: center;
}
.svc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  cursor: pointer;
  transition: all 0.28s ease;
  border: none; padding: 0;
}
.svc-dot.active {
  background: var(--accent);
  width: 24px;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(46,204,138,0.6);
}

/* Click hint on side cards */
.svc-card[data-pos="prev1"],
.svc-card[data-pos="next1"] {
  cursor: pointer;
}
.svc-card[data-pos="prev1"]:hover,
.svc-card[data-pos="next1"]:hover {
  opacity: 0.75;
  filter: blur(1.5px);
}

/* Mobile: single card, no side peeks */
@media(max-width: 640px) {
  .svc-track { min-height: 600px; }
  .svc-card { width: min(88vw, 340px); }
  .svc-card[data-pos="prev1"] { transform: translateX(-92%) scale(0.78); opacity: 0.3; filter: blur(4px); }
  .svc-card[data-pos="next1"] { transform: translateX( 92%) scale(0.78); opacity: 0.3; filter: blur(4px); }
  .svc-card[data-pos="prev2"],
  .svc-card[data-pos="next2"] { opacity: 0; pointer-events: none; }
  .svc-fade { width: 12%; }
}

/* =====================================================
   NAVBAR — more translucent
   ===================================================== */

@media(max-width:640px) {
  /* ── Portfolio carousel ── */
  .car-wrapper { padding:0 8px; }

  /* Arrows drop into nav row (static flow) */
  .car-nav .car-arrow:first-of-type { position:static; transform:none; }
  .car-nav .car-arrow:last-of-type  { position:static; transform:none; }
  .car-nav { flex-wrap:wrap; gap:10px 12px; justify-content:center; }

  /* Swipe hint on its own centered row below arrows+dots */
  .car-nav .swipe-hint-wrap {
    display:flex; width:100%; justify-content:center; margin-top:2px;
    order:99;
  }

  /* Video centering */
  .car-col { display:flex; flex-direction:column; align-items:center; width:100%; }
  .car-col .pf-video-wrap { width:100% !important; margin:0 auto; }
  .car-evideo-wrap { width:100%; }
  .pf-video-wrap--wide { width:100%; margin:0 auto; }

  /* Arrow + cert sizes */
  .car-arrow { width:46px; height:46px; font-size:1.3rem; }
  .cert-arrow { width:46px; height:46px; font-size:1.3rem; }

  /* ── Services carousel arrows — inline with dots ── */
  /* Services arrows — inline with dots like portfolio */
  .svc-side-prev,
  .svc-side-next {
    position:static !important;
    transform:none !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
  }
  .svc-controls {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
    margin-top:2.5rem !important;
    padding:0 !important;
    position:relative !important;
  }
  .svc-arrow { width:46px; height:46px; font-size:1.3rem; }
  /* Hide the old side buttons from carousel track area */
  .svc-carousel .svc-side-prev,
  .svc-carousel .svc-side-next { display:flex !important; }
}

/* =====================================================
   NAV — Sliding Glass Pill Indicator
   ===================================================== */
.nav-pill-indicator {
  position:absolute; pointer-events:none; z-index:0; border-radius:12px;
  background:rgba(255,255,255,0.10);
  backdrop-filter:blur(32px) saturate(200%) brightness(1.12);
  -webkit-backdrop-filter:blur(32px) saturate(200%) brightness(1.12);
  border-top:1px solid rgba(255,255,255,0.30);
  border-left:1px solid rgba(255,255,255,0.14);
  border-right:1px solid rgba(255,255,255,0.10);
  border-bottom:1px solid rgba(0,0,0,0.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.26),inset 0 -1px 0 rgba(0,0,0,0.10),
    0 4px 18px rgba(0,0,0,0.25),0 0 14px rgba(46,204,138,0.12),0 0 0 1px rgba(46,204,138,0.08);
  opacity:0;
  transition:left .36s cubic-bezier(0.16,1,0.3,1),top .36s cubic-bezier(0.16,1,0.3,1),
    width .36s cubic-bezier(0.16,1,0.3,1),height .36s cubic-bezier(0.16,1,0.3,1),opacity .2s ease;
}
.nav-pill-indicator::before {
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,0.12) 0%,transparent 100%);
  border-radius:12px 12px 0 0;pointer-events:none;
}
@media(max-width:900px){.nav-pill-indicator{display:none!important;}}

/* ── Nav link scale on hover ── */
.nav-link { transition:color var(--t),background var(--t),box-shadow var(--t),border-color var(--t),transform var(--t) !important; }
.nav-link:hover { transform:scale(1.06); }
.nav-link.active { transform:none; }

/* ── Mobile nav — centered items ── */
@media(max-width:900px){
  .nav-links { align-items:center!important; }
}

/* ── Back to top — show on mobile ── */
@media(max-width:768px){
  .back-to-top { display:flex!important; bottom:1.5rem; right:1.2rem; }
}

/* ── Float commission — hide on mobile ── */
@media(max-width:768px){
  .float-commission { display:none!important; }
}

/* ── Hero scroll hint — flow below stats on mobile ── */
@media(max-width:600px){
  .hero-scroll-hint { position:relative!important; bottom:auto!important; left:auto!important;
    transform:none!important; align-self:center; margin-top:2rem; }
}

/* ── Portfolio videos — center on mobile ── */
@media(max-width:768px){
  .car-col .pf-video-wrap { display:block; } /* keep block so absolute iframe fills correctly */
  .pf-video-wrap--wide { margin:0 auto; }
}

/* ── Swipe hint pill ── */
.swipe-hint-wrap { display:none; justify-content:center; margin-top:12px; }
@media(max-width:640px){
  .swipe-hint-wrap { display:flex; }
}
.swipe-hint-pill {
  display:inline-flex;align-items:center;gap:6px;padding:5px 16px;border-radius:100px;
  font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);pointer-events:none;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,0.14);
  border-left:1px solid rgba(255,255,255,0.07);
  border-right:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(0,0,0,0.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ── IDD phone input ── */
.phone-input-wrap { display:flex; align-items:stretch; }
.idd-dropdown { position:relative; flex-shrink:0; }
.idd-trigger {
  display:flex;align-items:center;gap:6px;height:100%;min-width:110px;
  padding:.9rem 1rem;cursor:pointer;font-family:var(--ff-body);font-size:.88rem;
  color:var(--text);white-space:nowrap;
  background:rgba(255,255,255,0.045);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,0.12);border-left:1px solid rgba(255,255,255,0.06);
  border-right:none;border-bottom:1px solid rgba(0,0,0,0.18);
  border-radius:var(--r-lg) 0 0 var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
  transition:background .2s,border-color .2s;
}
.idd-trigger:hover{background:rgba(46,204,138,0.06);border-top-color:rgba(46,204,138,0.3);}
.idd-flag{font-size:1.05rem;line-height:1;}
.idd-code{font-size:.82rem;font-weight:600;color:var(--accent);}
.idd-chevron{font-size:.6em;color:var(--text-3);transition:transform .25s;margin-left:2px;}
.idd-dropdown.open .idd-chevron{transform:rotate(180deg);}
.idd-panel{
  display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:600;min-width:290px;
  border-radius:18px;
  background:rgba(5,6,10,0.88);backdrop-filter:blur(60px) saturate(200%);-webkit-backdrop-filter:blur(60px) saturate(200%);
  border-top:1px solid rgba(255,255,255,0.2);border-left:1px solid rgba(255,255,255,0.09);
  border-right:1px solid rgba(255,255,255,0.07);border-bottom:1px solid rgba(0,0,0,0.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 24px 72px rgba(0,0,0,0.75);
  animation:dropIn .18s ease;
}
.idd-dropdown.open .idd-panel{display:block;}
.idd-search-wrap{padding:10px 10px 6px;}
.idd-search{
  width:100%;padding:.6rem 1rem;font-family:var(--ff-body);font-size:.875rem;color:var(--text);
  border-radius:12px;outline:none;
  background:rgba(255,255,255,0.06);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.idd-search::placeholder{color:var(--text-3);}
.idd-search:focus{border-color:rgba(46,204,138,0.4);background:rgba(46,204,138,0.04);}
.idd-list{max-height:220px;overflow-y:auto;padding:4px 6px 8px;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.1) transparent;list-style:none;}
.idd-list::-webkit-scrollbar{width:4px;}
.idd-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:3px;}
.idd-item{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:10px;
  cursor:pointer;color:var(--text-2);font-size:.875rem;transition:background .15s,color .15s;}
.idd-item:hover,.idd-item.sel{background:rgba(46,204,138,0.1);color:var(--accent);}
.idd-item-flag{font-size:1.05rem;line-height:1;flex-shrink:0;}
.idd-item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.idd-item-code{font-size:.78rem;color:var(--text-3);font-weight:600;flex-shrink:0;}
.idd-number{border-radius:0 var(--r-lg) var(--r-lg) 0!important;border-left:none!important;flex:1;min-width:0;}

/* ── Country dropdown ── */
.country-wrap{position:relative;}
.country-drop{
  display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:500;
  max-height:220px;overflow-y:auto;padding:6px;list-style:none;
  border-radius:16px;
  background:rgba(5,6,10,0.88);backdrop-filter:blur(60px) saturate(200%);-webkit-backdrop-filter:blur(60px) saturate(200%);
  border-top:1px solid rgba(255,255,255,0.18);border-left:1px solid rgba(255,255,255,0.08);
  border-right:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(0,0,0,0.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 20px 60px rgba(0,0,0,0.7);
  animation:dropIn .18s ease;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.1) transparent;
}
.country-drop li{padding:8px 14px;border-radius:10px;cursor:pointer;font-size:.875rem;
  color:var(--text-2);transition:background .15s,color .15s;}
.country-drop li:hover,.country-drop li.sel{background:rgba(46,204,138,0.1);color:var(--accent);}

/* ── Date / Time ── */
input[type="date"].form-input,input[type="time"].form-input{color-scheme:dark;}
input[type="date"].form-input::-webkit-calendar-picker-indicator,
input[type="time"].form-input::-webkit-calendar-picker-indicator{
  filter:invert(0.6) sepia(1) saturate(4) hue-rotate(100deg);cursor:pointer;opacity:.75;
}
input[type="date"].form-input::-webkit-calendar-picker-indicator:hover,
input[type="time"].form-input::-webkit-calendar-picker-indicator:hover{opacity:1;}
/* ============================================================
   INQUIRY SENT MODAL
============================================================ */
.inquiry-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: overlayFadeIn .2s ease;
}
.inquiry-overlay[hidden] { display: none; }

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.inquiry-modal {
  background: var(--surface, #1a1a2e);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  animation: modalSlideUp .25s ease;
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.inquiry-modal-icon {
  font-size: 3rem;
  margin-bottom: .75rem;
  line-height: 1;
}

.inquiry-modal-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--accent, #2ECC8A);
}

.inquiry-modal-msg {
  font-size: .95rem;
  color: var(--text-muted, rgba(255,255,255,.7));
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.inquiry-modal-msg a {
  color: var(--accent, #2ECC8A);
  text-decoration: underline;
}

.inquiry-modal-close {
  min-width: 140px;
}