/* ============================================================
   Sailing Global — brand site
   Sections: dark hero · light ecosystem · dark AI · light about · dark footer
   ============================================================ */

:root{
  --ink:        #06101F;
  --ink-2:      #334E68;
  --ink-3:      #6B8299;
  --brand:      #2E7BFF;
  --brand-2:    #38D6F5;
  --accent:     #00D6B4;
  --line:       #E3EAF3;
  --line-soft:  #EEF3F9;
  --bg:         #FFFFFF;
  --surface:    #F6F9FD;

  --dark:       #06101F;
  --dark-2:     #0A1C33;
  --dark-3:     #0E2743;
  --dark-line:  rgba(255,255,255,.12);
  --dark-text:  #9FB6CC;

  --radius:     16px;
  --radius-lg:  22px;
  --shadow-sm:  0 1px 2px rgba(6,16,31,.05), 0 4px 14px rgba(6,16,31,.05);
  --shadow-md:  0 4px 16px rgba(6,16,31,.07), 0 16px 40px rgba(6,16,31,.06);

  --grad:       linear-gradient(120deg, #2E7BFF 0%, #38D6F5 55%, #00D6B4 100%);
  --maxw:       1200px;

  --font: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:86px; }

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.7;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{ color:var(--ink); line-height:1.25; margin:0 0 .6em; letter-spacing:-.015em; font-weight:700; }
h1{ font-size:clamp(2.3rem, 5vw, 4rem); font-weight:800; letter-spacing:-.032em; }
h2{ font-size:clamp(1.65rem, 2.9vw, 2.5rem); font-weight:800; letter-spacing:-.026em; }
h3{ font-size:1.16rem; font-weight:700; }
p{ margin:0 0 1em; }
a{ color:var(--brand); text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

.grad{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--dark); color:#fff; padding:12px 18px; border-radius:0 0 10px 0; }
.skip-link:focus{ left:0; }

/* ---------------- Header ---------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:76px; }

.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand-mark{ width:36px; height:36px; flex-shrink:0; }
.brand-mark svg{ width:100%; height:100%; display:block; }
.brand-text strong{ font-size:1.08rem; font-weight:800; letter-spacing:-.02em; }

.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav a{
  position:relative; padding:9px 14px; border-radius:9px;
  font-size:.92rem; font-weight:600;
  transition:color .18s ease, background .18s ease;
}

.header-actions{ display:flex; align-items:center; gap:10px; }

.lang-toggle{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:999px;
  border:1px solid var(--line); background:transparent;
  font-family:inherit; font-size:.82rem; font-weight:650;
  cursor:pointer; transition:all .18s ease;
}
.lang-toggle svg{ width:16px; height:16px; }
.lang-toggle:hover{ border-color:currentColor; }

/* --- transparent state (over dark hero) --- */
.site-header.is-top .brand-text strong{ color:#fff; }
.site-header.is-top .main-nav a{ color:rgba(255,255,255,.78); }
.site-header.is-top .main-nav a:hover{ color:#fff; background:rgba(255,255,255,.1); }
.site-header.is-top .main-nav a.is-active{ color:#fff; }
.site-header.is-top .lang-toggle{ color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.26); }
.site-header.is-top .lang-toggle:hover{ color:#fff; border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.08); }
.site-header.is-top .nav-toggle{ border-color:rgba(255,255,255,.26); background:transparent; }
.site-header.is-top .nav-toggle span{ background:#fff; }

/* --- solid state (scrolled) --- */
.site-header.is-solid{
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 4px 20px rgba(6,16,31,.05);
}
.site-header.is-solid .brand-text strong{ color:var(--ink); }
.site-header.is-solid .main-nav a{ color:var(--ink-2); }
.site-header.is-solid .main-nav a:hover{ color:var(--brand); background:var(--surface); }
.site-header.is-solid .main-nav a.is-active{ color:var(--brand); }
.site-header.is-solid .lang-toggle{ color:var(--ink-2); border-color:var(--line); background:var(--bg); }
.site-header.is-solid .lang-toggle:hover{ color:var(--brand); border-color:var(--brand); }
.site-header.is-solid .nav-toggle{ border-color:var(--line); background:var(--bg); }
.site-header.is-solid .nav-toggle span{ background:var(--ink); }

.main-nav a.is-active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:3px;
  height:2px; border-radius:2px; background:var(--grad);
}

.nav-toggle{
  display:none; width:40px; height:40px; border-radius:10px;
  border:1px solid var(--line); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:4.5px;
}
.nav-toggle span{ display:block; width:17px; height:1.8px; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6.3px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6.3px) rotate(-45deg); }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:999px;
  font-family:inherit; font-size:.96rem; font-weight:650;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--grad); color:#04121F; box-shadow:0 8px 24px rgba(46,123,255,.34); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(46,123,255,.44); }
.btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.34); }
.btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.09); transform:translateY(-2px); }

/* ---------------- Hero ---------------- */
.hero{
  position:relative; overflow:hidden;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:132px 0 76px;
  background:
    radial-gradient(1100px 620px at 78% 8%, rgba(46,123,255,.24), transparent 62%),
    radial-gradient(900px 560px at 6% 88%, rgba(0,214,180,.16), transparent 60%),
    linear-gradient(168deg, #06101F 0%, #0A1C33 46%, #071426 100%);
}
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(560px 300px at 50% 0%, rgba(56,214,245,.12), transparent 70%),
    radial-gradient(700px 420px at 100% 100%, rgba(0,214,180,.1), transparent 70%);
}
.hero-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,16,31,.55) 0%, rgba(6,16,31,0) 26%, rgba(6,16,31,0) 66%, rgba(6,16,31,.72) 100%);
}
.hero-inner{ position:relative; z-index:2; }

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px 7px 12px; margin-bottom:26px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);
  font-size:.82rem; font-weight:600; color:rgba(255,255,255,.82);
}
.hero-eyebrow .dot{
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(0,214,180,.18);
}
.hero h1{ color:#fff; max-width:17ch; margin-bottom:22px; }
.hero-sub{
  max-width:62ch; font-size:clamp(1rem, 1.35vw, 1.12rem);
  color:rgba(255,255,255,.72); margin-bottom:36px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:56px; }

.hero-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg); overflow:hidden;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(8px);
}
.hero-stats li{
  padding:22px 24px;
  border-left:1px solid rgba(255,255,255,.1);
}
.hero-stats li:first-child{ border-left:none; }
.hero-stats strong{
  display:block; font-size:clamp(1.3rem,2.1vw,1.7rem); font-weight:800;
  color:#fff; letter-spacing:-.03em; line-height:1.2;
}
.hero-stats span{ display:block; font-size:.8rem; color:rgba(255,255,255,.56); margin-top:4px; }

/* ---------------- Sections ---------------- */
.section{ padding:104px 0; }
.section-light{ background:var(--bg); }

.section-head{ max-width:780px; margin:0 auto 56px; text-align:center; }
.section-sub{ font-size:1.04rem; margin:0; }

.kicker{
  text-transform:uppercase; letter-spacing:.15em;
  font-size:.75rem; font-weight:700; color:var(--brand); margin-bottom:14px;
}

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------------- Ecosystem ---------------- */
.eco-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
.eco{
  position:relative; padding:34px 32px 32px;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--bg); box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.eco:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:#CFE0FB; }
.eco-icon{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:15px; margin-bottom:22px;
  background:linear-gradient(135deg, #EDF4FF 0%, #E6FAF6 100%);
  border:1px solid #D9E9FB; color:var(--brand);
}
.eco-icon svg{ width:25px; height:25px; }
.eco h3{ margin-bottom:12px; }
.eco p{ font-size:.96rem; margin-bottom:0; }
.eco-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:20px;
  font-weight:700; font-size:.92rem;
}
.eco-link svg{ width:16px; height:16px; transition:transform .2s ease; }
.eco-link:hover svg{ transform:translate(3px,-3px); }

/* ---------------- AI / dark section ---------------- */
.section-dark{
  position:relative; overflow:hidden; color:var(--dark-text);
  background:
    radial-gradient(900px 480px at 84% 4%, rgba(46,123,255,.2), transparent 62%),
    radial-gradient(760px 460px at 6% 96%, rgba(0,214,180,.14), transparent 62%),
    linear-gradient(168deg, #06101F 0%, #0A1C33 52%, #071426 100%);
}
.dark-deco{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(760px 420px at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(760px 420px at 50% 40%, #000 0%, transparent 78%);
}
.section-dark .container{ position:relative; z-index:1; }
.section-dark h2{ color:#fff; }
.section-dark .kicker{ color:var(--brand-2); }
.section-dark .section-sub{ color:rgba(255,255,255,.66); }

.arch{ margin:0 auto 56px; max-width:1000px; overflow-x:auto; }
.arch svg{ display:block; width:100%; min-width:720px; height:auto; }
.arch-flow{
  stroke-dasharray:5 7; opacity:.85;
  animation:flow 1.1s linear infinite;
}
@keyframes flow{ to{ stroke-dashoffset:-24; } }

.ai-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.ai-card{
  padding:32px 28px; border-radius:var(--radius-lg);
  background:rgba(255,255,255,.045);
  border:1px solid var(--dark-line);
  backdrop-filter:blur(6px);
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.ai-card:hover{ transform:translateY(-6px); background:rgba(255,255,255,.07); border-color:rgba(56,214,245,.42); }
.ai-num{
  display:block; font-size:.8rem; font-weight:800; letter-spacing:.12em;
  color:var(--brand-2); margin-bottom:16px;
}
.ai-card h3{ color:#fff; margin-bottom:12px; }
.ai-card p{ font-size:.95rem; color:rgba(255,255,255,.68); margin-bottom:18px; }
.ai-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.ai-tags li{
  padding:5px 12px; border-radius:8px;
  background:rgba(56,214,245,.1); border:1px solid rgba(56,214,245,.28);
  font-size:.78rem; font-weight:600; color:#8FE4F7;
}

/* ---------------- About ---------------- */
.about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; }

.about-photo{ margin:0; }
.about-photo-link{
  display:block; text-decoration:none; color:inherit;
  border-radius:var(--radius-lg);
  transition:transform .35s ease, box-shadow .35s ease;
}
.about-photo-link:hover,
.about-photo-link:focus-visible{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}
.about-photo-link:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:4px;
}
.about-photo-frame{
  position:relative; overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:linear-gradient(150deg, #0A1C33 0%, #123E73 100%);
  aspect-ratio:16 / 9;
}
.about-photo-frame img{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s ease;
}
.about-photo-link:hover img,
.about-photo-link:focus-visible img{
  transform:scale(1.05);
}
.about-photo-frame.is-empty img{ display:none; }
.about-photo-fallback{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:24px; text-align:center; color:rgba(255,255,255,.72);
}
.about-photo-fallback svg{ width:38px; height:38px; opacity:.55; }
.about-photo-fallback span{ font-size:.92rem; font-weight:650; color:rgba(255,255,255,.85); }
.about-photo-fallback em{
  font-style:normal; font-size:.74rem; letter-spacing:.02em;
  color:rgba(255,255,255,.45); font-family:ui-monospace, "SFMono-Regular", Consolas, monospace;
}
.about-photo figcaption{
  margin-top:14px; font-size:.83rem; color:var(--ink-3); letter-spacing:.01em;
}

.about-copy .lead{ font-size:1.08rem; color:var(--ink); font-weight:500; }
.about-meta{ margin:28px 0 0; display:grid; gap:16px; }
.about-meta div{
  display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:baseline;
  padding-top:14px; border-top:1px solid var(--line-soft);
}
.about-meta dt{
  font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; color:var(--ink-3);
}
.about-meta dd{ margin:0; font-size:.94rem; font-weight:650; color:var(--ink); }

.backing{
  position:relative; margin:56px 0 0; padding:38px 44px 34px;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, #F2F7FF 0%, #EAFBF7 100%);
  border:1px solid #D9E9FB;
}
.backing-mark{
  position:absolute; top:6px; left:20px;
  font-size:5rem; line-height:1; font-weight:800;
  color:rgba(46,123,255,.14);
}
.backing p{
  position:relative; margin:0 0 16px;
  font-size:1.06rem; line-height:1.85; color:var(--ink); font-weight:500;
}
.backing footer{
  position:relative;
  font-size:.76rem; text-transform:uppercase; letter-spacing:.13em;
  font-weight:700; color:var(--brand);
}

/* ---------------- Footer ---------------- */
.site-footer{ background:var(--dark); color:var(--dark-text); padding:68px 0 0; }
.footer-inner{
  display:grid; grid-template-columns:1.3fr 1fr 1.2fr 1fr; gap:40px;
  padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-col h4{
  color:#fff; font-size:.74rem; text-transform:uppercase; letter-spacing:.13em;
  margin-bottom:16px; font-weight:700;
}
.footer-col p{ margin:0 0 8px; font-size:.9rem; line-height:1.7; color:#B9CBDC; }
.footer-col a{ color:#B9CBDC; transition:color .18s ease; }
.footer-col a:hover{ color:#fff; }
.footer-col address{ font-style:normal; font-size:.88rem; line-height:1.85; color:#93AAC0; }
.footer-dim{ color:#6E8399 !important; font-size:.78rem !important; text-transform:uppercase; letter-spacing:.1em; margin-top:14px !important; }
.footer-col-brand .brand-text strong{ color:#fff; }
.footer-tag{ margin-top:16px !important; font-size:.88rem !important; color:#7C93AA !important; max-width:30ch; }
.footer-mail{ color:#4FE3C4 !important; font-weight:600; }

.footer-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; padding:24px 28px;
}
.footer-bar p{ margin:0; font-size:.82rem; color:#6E8399; }
.footer-legal{ display:flex; align-items:center; gap:12px; font-size:.82rem; color:#6E8399; }
.footer-legal a{ color:#8FA9C0; }
.footer-legal a:hover{ color:#fff; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1080px){
  .ai-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; gap:36px; }
  .about-grid{ grid-template-columns:1fr; gap:36px; }
}

@media (max-width: 960px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:absolute; top:76px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(6,16,31,.12);
    padding:12px 20px 20px;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .3s ease, opacity .25s ease, visibility .25s ease;
  }
  .main-nav.is-open{ max-height:340px; opacity:1; visibility:visible; }
  .main-nav a{ padding:12px 10px; font-size:.98rem; color:var(--ink-2) !important; }
  .main-nav a:hover{ background:var(--surface) !important; color:var(--brand) !important; }
  .main-nav a.is-active::after{ display:none; }
  .hero{ min-height:auto; padding:120px 0 64px; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .hero-stats li:nth-child(3){ border-left:none; }
  .hero-stats li:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.1); }
  .section{ padding:80px 0; }
  .backing{ padding:32px 28px 28px; }
}

@media (max-width: 720px){
  .container{ padding:0 20px; }
  .eco-grid{ grid-template-columns:1fr; }
  .hero-cta .btn{ flex:1 1 auto; }
  .about-meta div{ grid-template-columns:1fr; gap:4px; }
  .footer-inner{ grid-template-columns:1fr; gap:30px; }
  .footer-bar{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 560px){
  .hero-stats{ grid-template-columns:1fr; }
  .hero-stats li{ border-left:none !important; }
  .hero-stats li + li{ border-top:1px solid rgba(255,255,255,.1); }
}

/* ---------------- Legal page ---------------- */
.legal-page{ padding:132px 0 96px; background:var(--bg); }
.legal-head{ max-width:760px; margin:0 auto 52px; text-align:center; }
.legal-head h1{ font-size:clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom:14px; }
.legal-entity{ font-size:.98rem; font-weight:650; color:var(--ink); margin-bottom:4px; }
.legal-updated{ font-size:.84rem; color:var(--ink-3); margin-bottom:26px; }
.legal-toc{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  padding-top:24px; border-top:1px solid var(--line-soft);
}
.legal-toc a{
  padding:8px 18px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
  font-size:.87rem; font-weight:650; color:var(--ink-2);
  transition:all .18s ease;
}
.legal-toc a:hover{ color:var(--brand); border-color:#CFE0FB; background:#F0F6FF; }

.legal-body{ max-width:760px; margin:0 auto; }
.legal-body section{ padding-bottom:44px; margin-bottom:44px; border-bottom:1px solid var(--line-soft); scroll-margin-top:110px; }
.legal-body section:last-child{ border-bottom:none; margin-bottom:0; }
.legal-body h2{ font-size:1.5rem; margin-bottom:18px; }
.legal-body h3{ font-size:1.02rem; margin:28px 0 8px; }
.legal-body p{ font-size:.96rem; color:var(--ink-2); }
.legal-contact{ margin-top:14px; padding:20px 24px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); }
.legal-contact a{ font-weight:700; }
.legal-contact span{ display:block; margin-top:8px; font-size:.88rem; color:var(--ink-3); line-height:1.7; }

@media (max-width: 720px){
  .legal-page{ padding:112px 0 72px; }
  .legal-body section{ padding-bottom:32px; margin-bottom:32px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .arch-flow{ animation:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}