:root{--brand:#F97316;--radius-pill:9999px;--shadow-sm:0 4px 12px rgba(0,0,0,.08);--shadow-lg:0 10px 30px rgba(0,0,0,.15)}
.theme-light{--bg:#fff;--bg-elev:#fff;--ink:#0F141B;--muted:#6B7280;--line:#E5E7EB;--chip:rgba(17,24,39,.04);--magnifier-ring:var(--brand);--magnifier-shadow:0 8px 22px rgba(249,115,22,.14)}
.theme-dark{--bg:#0B0F14;--bg-elev:#0F141B;--ink:#E5E7EB;--muted:#9CA3AF;--line:#1F2937;--chip:rgba(255,255,255,.06);--magnifier-ring:#fff;--magnifier-shadow:0 8px 22px rgba(255,255,255,.14)}
*{box-sizing:border-box}html,body{height:100%}html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}body{margin:0;background:var(--bg);color:var(--ink)}
a,a:link,a:visited,a:hover,a:active{text-decoration:none!important;color:inherit!important}
.wrap{max-width:1140px;margin:0 auto;padding-inline:clamp(18px,6vw,32px)}

/* Header — logo | center switch | right links */
.header{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 0}
.logo img{height:40px;width:auto;display:block}
.center-switch{display:flex;justify-content:center}
.theme-icons{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:14px;background:var(--chip);padding:2px}
.theme-icons button{width:34px;height:28px;border:0;background:transparent;cursor:pointer;border-radius:12px;font-size:16px;line-height:1;color:var(--muted);transition:transform .12s}
.theme-icons button:hover{transform:translateY(-1px)}
.theme-icons button.active{background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}

.right-links{display:flex;align-items:center;gap:22px}
.link-thin{font-weight:600;opacity:.92;position:relative}
.link-thin:hover{opacity:1}
/* subtle animated underline on hover */
.link-thin::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:linear-gradient(90deg,transparent, var(--brand), transparent);opacity:0;transform:scaleX(.6);transition:.2s}
.link-thin:hover::after{opacity:1;transform:scaleX(1)}

/* Mobile kebab */
.kebab{display:none;position:relative}
.kebab-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line);background:var(--bg-elev);border-radius:12px;cursor:pointer}
.kebab-btn .dot{width:3px;height:3px;border-radius:50%;background:var(--ink);margin:0 1px;display:block}
.kebab-menu{position:absolute;right:0;top:42px;background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;display:none;min-width:160px}
.kebab-menu.open{display:block}
.kebab-menu .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kebab-menu .icons{display:inline-flex;gap:6px}
.kebab-menu .icons button{width:34px;height:28px;border:1px solid var(--line);background:var(--bg);border-radius:10px;cursor:pointer;color:var(--muted)}
.kebab-menu a{padding:8px 6px;display:block;border-radius:8px}
.kebab-menu a:hover{background:var(--chip)}

@media(max-width:768px){.center-switch{display:none}.kebab{display:block}}
@media(max-width:520px){.right-links{gap:14px}}

/* Hero */
.main{min-height:calc(100svh - 72px - 72px);display:grid;place-items:center} /* <- changed 100vh to 100svh */
.center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.hero-title{margin:0;font-weight:800;letter-spacing:-.02em;font-size:clamp(32px,7.5vw,70px)}
.hero-title .brand{color:var(--brand)}
.hero-sub{margin:0;color:var(--muted);font-size:clamp(15px,2.2vw,18px);line-height:1.7;max-width:900px}
.cta{display:flex;flex-direction:column;gap:12px;margin-top:6px}
@media(min-width:640px){.cta{flex-direction:row}}
.pill{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--bg-elev);font-weight:800;box-shadow:var(--shadow-sm);letter-spacing:0;position:relative;overflow:hidden}
.pill .label{display:inline-block}.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);display:inline-block}
.pill:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}

/* Dark theme creative for pills: neon rim + soft glow */
.theme-dark .pill{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.1));border-color:#2A3542;box-shadow:0 6px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04)}
.theme-dark .pill:hover{box-shadow:0 10px 28px rgba(0,0,0,.5), 0 0 0 2px rgba(249,115,22,.15)}
.theme-dark .pill .label{color:#E8EDF3}
.theme-dark .pill .dot{background:linear-gradient(180deg, #FFB566, #F97316)}

/* Per-letter interaction */
.per-letter span{display:inline-block;transition:transform .12s ease,color .12s ease}

/* Time & footer */
.local-time{position:fixed;left:24px;bottom:calc(72px + 28px);background:var(--bg-elev);border:1px solid var(--line);border-radius:9999px;box-shadow:var(--shadow-sm);color:var(--ink);padding:10px 14px;font-size:14px}
.footer{border-top:1px solid var(--line);background:var(--bg);height:72px}.foot{height:100%;display:flex;align-items:center;justify-content:space-between}.copyright{font-size:10px;color:var(--muted)}
.follow{position:relative}.follow-btn{font-size:10px;border:none;background:none;color:var(--ink);cursor:pointer}
.socials{position:absolute;left:0;bottom:110%;display:flex;gap:8px;padding:8px;border:1px solid var(--line);background:var(--bg-elev);border-radius:12px;opacity:0;pointer-events:none;transform:translateY(6px);transition:.15s}
.follow:hover .socials{opacity:1;pointer-events:auto;transform:translateY(0)}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;border:1px solid var(--line)}
.social-link:hover{border-color:var(--brand);color:var(--brand)}

/* Magnifier — thinner ring + faint tint + falloff */
@media(hover:hover) and (pointer:fine){
  .magnifier{position:fixed;top:0;left:0;transform:translate(-50%,-50%);z-index:1000;width:54px;height:54px;border-radius:50%;
    border:1.25px solid var(--magnifier-ring); /* thinner */
    box-shadow:var(--magnifier-shadow);
    overflow:hidden;pointer-events:none;opacity:0;transition:.12s;background-repeat:no-repeat;background-position:center;
    background-color:rgba(255,255,255,.05);
    backdrop-filter:brightness(1.06) saturate(1.06);
  }
  .magnifier::after{content:"";position:absolute;inset:0;background:radial-gradient(transparent 35%, rgba(0,0,0,.12));pointer-events:none}
  .magnifier.show{opacity:1}
  .magnifier.active{width:62px;height:62px}
}

/* About page styles */
.page-hero{border-bottom:1px solid var(--line)}.page-hero__inner{display:grid;gap:10px;padding:56px 0;text-align:center}
.page-title{margin:0;font-weight:800;letter-spacing:-.02em;font-size:clamp(28px,5.6vw,44px)}
.page-sub{margin:0 auto;color:var(--muted);font-size:clamp(15px,2vw,18px);line-height:1.7;max-width:760px}
.about-body{padding:32px 0 40px;display:grid;gap:40px}
.sec-title{margin:0 0 8px;font-weight:700;letter-spacing:-.01em;font-size:clamp(20px,3vw,28px)}
.lead{font-size:clamp(16px,2.1vw,18px);color:var(--ink);opacity:.9;max-width:820px}
.cards{display:grid;grid-template-columns:1fr;gap:14px}@media(min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}}.card{border:1px solid var(--line);border-radius:16px;padding:16px 16px 14px;background:var(--bg-elev)}.card-title{margin:0 0 8px;font-weight:700}.card ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.8}
.principles{margin:0;padding-left:18px;color:var(--muted);line-height:1.85}.p-key{color:var(--ink);font-weight:700}
.steps{display:grid;grid-template-columns:1fr;gap:14px}@media(min-width:820px){.steps{grid-template-columns:repeat(5,1fr)}}.step{border:1px solid var(--line);border-radius:16px;padding:14px 14px 12px;background:var(--bg-elev)}.step h4{margin:0 0 6px;font-size:16px}.step p{margin:0;color:var(--muted)}.step-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);display:inline-block;margin-right:6px}

/* ========================= */
/* Appended responsive helpers */
/* ========================= */

/* Media never overflows */
img,svg,video,canvas,iframe{max-width:100%;height:auto}

/* Local time chip — fluid + safe area on notched phones */
.local-time{
  max-width:80vw;
  left:clamp(12px,4vw,24px);
  bottom:calc(72px + 20px + env(safe-area-inset-bottom));
  font-size:clamp(12px,2.4vw,14px);
  padding:8px 12px;
}

/* Improve small-screen nav behavior */
@media (max-width:640px){
  .right-links .link-thin{display:none} /* rely on kebab for About/Contact */
  .kebab{display:block}
}

/* Tighten header on very small phones */
@media (max-width:420px){
  .head{grid-template-columns:auto 1fr auto;gap:8px}
  .logo img{height:34px}
}

/* Touch target comfort */
.theme-icons button,.kebab-btn,.pill{min-height:44px}

/* About steps — keep them readable as screens shrink */
@media (max-width:740px){
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .steps{grid-template-columns:1fr}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* Hide local time on mobile */
@media (max-width:640px) {
  .local-time {
    display:none !important;
  }
}
/* Mobile: hide timestamp entirely */
@media (max-width:640px){
  .local-time{ display:none !important; }
}
/* Mobile: extra side padding so the logo/kebab don’t hug the edges */
@media (max-width:480px){
  .head{ padding-inline: clamp(16px, 7vw, 28px); }
}
/* Mobile: 80% width pills, centered */
@media (max-width:640px){
  .cta{ width:100%; align-items:center; }
  .pill{ width:80%; justify-content:center; }
}
/* Tidy, smaller kebab button */
.kebab-btn{ width:24px; height:24px; border-radius:6px; padding:0; }
.kebab-btn .dot{ width:2px; height:2px; margin:0 1px; }
/* Tablet: add breathing space top/bottom */
@media (min-width:768px) and (max-width:1180px){
  .head{ padding-block:16px; }
  .logo img{ height:36px; } /* slightly smaller logo for balance */
}
.kebab-btn{ width:26px; height:26px; border-radius:8px; }
.kebab-btn .dot{ width:2.5px; height:2.5px; margin:0 1px; }
@media (max-width:640px){
  .cta{ width:100%; align-items:center; }
  .pill{ width:80%; justify-content:center; }
}
.wrap {
  max-width:1140px;
  margin:0 auto;
  padding-inline: clamp(18px,6vw,32px);
}
/* Extra side padding for header on tablets */
@media (min-width:641px) and (max-width:1180px){
  .head {
    padding-inline: clamp(28px, 8vw, 56px); /* more space left & right */
  }
}


/* Modal Contact */
.modal{position:fixed;inset:0;display:none;z-index:60}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
.modal-card{position:relative;max-width:760px;margin:6vh auto;background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,3.8vw,28px);box-shadow:0 30px 80px rgba(0,0,0,.28)}
.modal-close{position:absolute;top:8px;right:10px;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:4px 10px;font-size:18px;cursor:pointer}
.contact-fallback{margin-top:8px;color:var(--muted)}


/* Contact V2 — modern card */
.contact-v2{
  --card-bg: var(--bg);
  --card-line: var(--line);
  --ring: color-mix(in srgb, var(--brand) 22%, transparent);
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 18px;
  padding: clamp(16px, 2.6vw, 24px);
  box-shadow: 0 10px 35px rgba(0,0,0,.06), 0 24px 64px rgba(0,0,0,.06);
  max-width: 880px;
  margin-inline: auto;
}
.contact-v2 .row{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(12px, 2.4vw, 18px); align-items:end; }
@media (max-width:880px){ .contact-v2 .row{ grid-template-columns:1fr; } }
.contact-v2 .field{ display:flex; flex-direction:column; gap:8px; }
.contact-v2 label{ font-weight:700; }
.contact-v2 input, .contact-v2 select, .contact-v2 textarea{
  height: 52px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.contact-v2 textarea{ height:auto; min-height: 160px; }
.contact-v2 input:focus, .contact-v2 select:focus, .contact-v2 textarea:focus{
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow: 0 0 0 5px var(--ring);
  outline: 0;
}
.contact-v2 .row-foot{ align-items:center; }
.contact-v2 .captcha-and-send{ display:flex; gap:12px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.contact-v2 .btn{
  height: 46px; padding: 0 20px; border-radius: 999px;
  border: none; background: linear-gradient(180deg, #ff8a2a, #ff6a00);
  color: #fff; font-weight: 800; letter-spacing: .2px;
  box-shadow: 0 10px 26px rgba(255,106,0,.35);
}
html[data-theme="dark"] .contact-v2 .btn{ color:#0B0F14; }
.contact-v2 .error{ display:none; color:#b45309; }
.contact-v2 .field.invalid .error{ display:block; }
.modal-card{ max-width: 940px; }
.back-link{ color: var(--muted); }
.page-hero .page-title .word { display: inline-block; }