:root{
    --emerald:#0e7a5b;
    --emerald-d:#0a5f47;
    --emerald-l:#12a37a;
    --slate:#26333d;
    --slate-deep:#1a252d;
    --ink:#20303a;
    --ink-soft:#586773;
    --mist:#eef2f1;
    --mist-2:#f6f8f7;
    --line:#e0e7e6;
    --gold:#c98a2b;
    --line-2:rgba(255,255,255,.15);
    --paper:#ffffff;
    --shadow:0 20px 46px -32px rgba(24,40,45,.42);
    box-sizing:border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  *,*::before,*::after{box-sizing:inherit}
  html{scroll-behavior:auto}
  body{margin:0; background:var(--paper); color:var(--ink);
    font-family:"Figtree",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    font-size:18px; line-height:1.62; -webkit-font-smoothing:antialiased}
  h1,h2,h3,h4{margin:0; font-weight:700; line-height:1.16; letter-spacing:-.02em; color:var(--ink)}
  h1{font-weight:800; letter-spacing:-.03em}
  p{margin:0 0 1rem}
  a{color:var(--emerald-d); text-decoration:none}
  a:hover{text-decoration:underline}
  .wrap{max-width:1160px; margin:0 auto; padding:0 32px}
  .narrow{max-width:820px}
  :focus-visible{outline:2px solid var(--emerald); outline-offset:3px; border-radius:3px}
  .lab{display:block; font-size:15px; font-weight:600; color:var(--emerald-d); margin-bottom:14px}

  .btn{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; letter-spacing:.05em; text-transform:uppercase; cursor:pointer;
    padding:15px 30px; border-radius:999px; border:1px solid transparent; transition:background .15s ease, border-color .15s ease, gap .15s ease}
  .btn:hover{text-decoration:none}
  .btn.pri{background:var(--emerald); color:#fff}
  .btn.pri:hover{background:var(--emerald-d)}
  .btn.nv{background:var(--slate); color:#fff}
  .btn.nv:hover{background:var(--slate-deep)}
  .btn.gh{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
  .btn.gh:hover{background:rgba(255,255,255,.12)}
  .btn.gd{background:#fff; color:var(--slate); border-color:var(--line)}
  .btn.gd:hover{border-color:var(--emerald); color:var(--emerald-d)}
  .btn.out{background:transparent; color:var(--emerald-d); border-color:var(--emerald)}
  .btn.out:hover{background:var(--emerald); color:#fff}
  .btn.link{background:transparent; color:#fff; border-color:transparent; padding-left:6px; padding-right:6px}
  .btn.link:hover{gap:12px}
  .btn.link svg{width:20px; height:12px}

  .util{background:var(--slate-deep); color:#b8c4cc}
  .util .wrap{display:flex; justify-content:flex-end; gap:26px; align-items:center; height:42px; font-size:14px}
  .util a{color:#b8c4cc; cursor:pointer}
  .util a:hover{color:#fff; text-decoration:none}
  header{position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--line)}
  .nav{display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px}
  .brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:24px; color:var(--slate); letter-spacing:-.03em; cursor:pointer}
  .brand .mk{width:30px; height:30px; border-radius:7px; background:var(--emerald); display:inline-flex; align-items:center; justify-content:center}
  .brand .mk::before{content:""; width:12px; height:12px; border:2.5px solid #fff; border-right-color:transparent; border-bottom-color:transparent}
  .menu{display:flex; align-items:center; gap:30px}
  .menu a{color:var(--ink); font-weight:500; font-size:16.5px; cursor:pointer; padding:4px 0; border-bottom:2px solid transparent}
  .menu a:hover{color:var(--emerald-d); text-decoration:none}
  .menu a.active{color:var(--slate); border-bottom-color:var(--emerald)}
  .navtoggle{display:none}


  .sec{padding:88px 0; border-bottom:1px solid var(--line)}
  .sec h2{font-size:clamp(28px,3.6vw,40px); max-width:22ch}
  .sec .intro{font-size:19px; color:var(--ink-soft); max-width:60ch; margin-top:18px}

  .hero{position:relative; color:#fff; overflow:hidden; display:flex; align-items:center; min-height:86vh;
    background:radial-gradient(60% 90% at 85% 8%, rgba(18,163,122,.22), rgba(18,163,122,0) 60%),
      linear-gradient(120deg,#27353f 0%, #202d36 50%, #18232b 100%)}
  .hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; z-index:1}
  .hero .motion{position:absolute; inset:0; z-index:1; overflow:hidden}
  .hero .motion svg{position:absolute; inset:0; width:100%; height:100%}
  .hero .motion g,.hero .motion rect{transform-box:fill-box; transform-origin:center}
  @media (prefers-reduced-motion:no-preference){
    .m-a{animation:mDrift 24s ease-in-out infinite}
    .m-b{animation:mDrift2 30s ease-in-out infinite}
    .m-c{animation:mDrift 20s ease-in-out infinite reverse}
    .m-bar{animation:mRise 5.5s ease-in-out infinite; transform-origin:bottom}
    .m-bar2{animation:mRise 5.5s ease-in-out infinite .8s; transform-origin:bottom}
    .m-bar3{animation:mRise 5.5s ease-in-out infinite 1.6s; transform-origin:bottom}
    .m-bar4{animation:mRise 5.5s ease-in-out infinite 2.4s; transform-origin:bottom}
    .m-pulse{animation:mPulse 7s ease-in-out infinite}
  }
  @keyframes mDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-22px)}}
  @keyframes mDrift2{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-24px,18px) rotate(6deg)}}
  @keyframes mRise{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
  @keyframes mPulse{0%,100%{opacity:.16}50%{opacity:.5}}
  .hero::after{content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(92deg, rgba(18,26,31,.78) 0%, rgba(18,26,31,.4) 55%, rgba(18,26,31,.08) 100%)}
  .hero .wrap{position:relative; z-index:3; padding:48px 32px; width:100%}
  .hero h1{color:#35d29b; font-size:clamp(40px,5.8vw,66px); max-width:16ch; text-shadow:0 2px 18px rgba(0,0,0,.42)}
  .hero .sub{font-size:clamp(18px,2vw,22px); color:#fff; max-width:52ch; margin-top:20px; font-weight:600; text-shadow:0 2px 14px rgba(0,0,0,.42)}
  .hero .cta{margin-top:34px; display:flex; gap:13px; flex-wrap:wrap}
  .pagehead{background:linear-gradient(120deg,#27353f,#1f2c35); color:#fff}
  .pagehead .wrap{padding:74px 32px 66px}
  .pagehead h1{color:#fff; font-size:clamp(32px,4.6vw,52px); max-width:20ch}
  .pagehead p{color:#d7e0dd; font-size:19px; max-width:56ch; margin-top:16px}
  .pagehead .lab{color:#7fd3ba}
  .pagehead.light{background:#fff; color:var(--ink); border-bottom:1px solid var(--line)}
  .pagehead.light .wrap{border-top:3px solid var(--emerald); padding-top:66px}
  .pagehead.light h1{color:var(--ink)}
  .pagehead.light p{color:var(--ink-soft)}
  .pagehead.light .lab{color:var(--emerald-d)}
  .pagehead.emerald{background:radial-gradient(85% 130% at 100% 0%, #12805e, #0c523e 58%, #0a4131 100%)}
  .pagehead.emerald .lab{color:#a7ecd4}
  .timeline{margin-top:44px; max-width:760px}
  .tphase{position:relative; padding:0 0 40px 58px; border-left:2px solid var(--line)}
  .tphase:last-child{padding-bottom:4px; border-left-color:transparent}
  .tphase .dot{position:absolute; left:-14px; top:-2px; width:26px; height:26px; border-radius:7px; background:var(--emerald); color:#fff; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center}
  .tphase h3{font-size:22px; margin:0 0 8px}
  .tphase p{color:var(--ink-soft); margin:0}

  .grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
  .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:24px}
  .caps{margin-top:-58px; position:relative; z-index:6}
  .card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:28px 26px; box-shadow:var(--shadow); transition:transform .16s ease, box-shadow .16s ease}
  .card:hover{transform:translateY(-3px); box-shadow:0 28px 56px -30px rgba(24,40,45,.5)}
  .ico{width:50px; height:50px; margin-bottom:16px; display:block}
  .card h3{font-size:18px; margin-bottom:9px; letter-spacing:-.01em}
  .card p{font-size:15.5px; color:var(--ink-soft); margin:0; line-height:1.55}

  .data{padding:92px 0 96px; background:var(--mist-2); border-bottom:1px solid var(--line)}
  .data .row{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center}
  .data h2{font-size:clamp(28px,3.4vw,38px); max-width:16ch}
  .data p{color:var(--ink-soft); font-size:18px; max-width:46ch; margin-top:16px}
  .data .cta{margin-top:24px}
  .funnel{background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 28px; box-shadow:var(--shadow)}
  .funnel .ft{font-size:14px; font-weight:600; color:var(--ink-soft); margin-bottom:18px; display:flex; justify-content:space-between}
  .funnel .fn{font-size:13.5px; color:#8a99a2; margin:14px 0 0}

  .statement h2{font-size:clamp(30px,4vw,46px); max-width:19ch; line-height:1.18}
  .statement p{font-size:19px; color:var(--ink-soft); max-width:60ch; margin-top:24px}

  .serve{color:#fff; padding:92px 0;
    background:radial-gradient(80% 120% at 100% 0%, #0f6b50, #0c523e 55%, #0a4131 100%)}
  .serve .lab{color:#8fe0c6}
  .serve h2{color:#fff}
  .serve .grid4{margin-top:48px}
  .who{border-top:2px solid rgba(255,255,255,.3); padding-top:18px}
  .who h3{color:#fff; font-size:19px; margin-bottom:9px}
  .who p{color:#cde7dd; font-size:16px; margin:0}

  .rec{position:relative; background:#fff; border:1px solid var(--line); border-radius:12px; padding:30px; box-shadow:var(--shadow)}
  .rec .n{font-size:44px; font-weight:800; color:var(--emerald-d); line-height:1; letter-spacing:-.03em}
  .rec .t{margin-top:12px; color:var(--ink-soft); font-size:16.5px}

  .insteaser{padding:88px 0; border-bottom:1px solid var(--line)}
  .insteaser h2{font-size:clamp(28px,3.4vw,38px)}
  .icard{position:relative; display:flex; flex-direction:column; background:var(--mist); border:1px solid var(--line); border-radius:84px; overflow:hidden; box-shadow:var(--shadow); cursor:pointer; min-height:452px; transition:transform .16s ease, box-shadow .16s ease}
  .icard:hover{transform:translateY(-4px); box-shadow:0 30px 60px -28px rgba(24,40,45,.55); text-decoration:none}
  .icard::after{content:""; position:absolute; inset:11px; border:1.5px solid rgba(255,255,255,.5); border-radius:74px; pointer-events:none; z-index:4}
  .icard .thumb{height:262px; background:var(--slate); position:relative; overflow:hidden}
  .icard .thumb svg{position:absolute; inset:0; width:100%; height:100%}
  .icard .body{background:var(--mist); padding:26px 40px 46px; flex:1; display:flex; flex-direction:column}
  .icard .body h3{font-size:18px; line-height:1.3; color:var(--slate); margin:0}
  .icard .tag{margin-top:14px; font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--emerald-d)}
  .seeall{display:flex; justify-content:flex-end; margin-top:24px}
  .seeall a{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--emerald-d); letter-spacing:.04em; cursor:pointer}
  .seeall svg{width:18px; height:12px}

  .feature{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
  .feature .ph{height:220px; background:var(--slate); position:relative; overflow:hidden}
  .feature .ph svg{position:absolute; inset:0; width:100%; height:100%}
  .feature .ph .badge{position:absolute; left:20px; top:20px; background:#fff; color:var(--slate); font-size:13.5px; font-weight:700; padding:6px 12px; border-radius:4px; z-index:2}
  .feature .fb{padding:28px 30px}
  .feature .kind{font-size:13.5px; font-weight:700; color:var(--emerald-d)}
  .feature h3{font-size:23px; margin:9px 0 9px; line-height:1.24}
  .feature p{color:var(--ink-soft); font-size:16.5px; margin:0 0 14px}
  .snip{display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:16px; transition:border-color .15s ease}
  .snip:hover{border-color:var(--emerald); text-decoration:none}
  .snip .kind{font-size:13px; font-weight:700; color:var(--emerald-d)}
  .snip h3{font-size:17.5px; margin:7px 0 0; line-height:1.32; color:var(--ink)}
  .snip .meta{font-size:13.5px; color:#8a99a2; margin-top:8px}
  .artcard{background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
  .artcard .ph{height:150px; background:var(--slate); position:relative; overflow:hidden}
  .artcard .ph svg{position:absolute; inset:0; width:100%; height:100%}
  .artcard .b{padding:22px}
  .artcard .kind{font-size:13px; font-weight:700; color:var(--emerald-d)}
  .artcard h3{font-size:18px; margin:8px 0 0; line-height:1.3}

  .steps{margin-top:50px; display:grid; grid-template-columns:repeat(3,1fr); gap:34px}
  .step{border-top:2px solid var(--emerald); padding-top:18px}
  .step .k{font-size:15px; font-weight:700; color:var(--emerald-d)}
  .step h3{font-size:22px; margin:8px 0 10px}
  .step p{font-size:17px; color:var(--ink-soft); margin:0}

  .srow{display:grid; grid-template-columns:56px 1fr; gap:22px; padding:34px 0; border-bottom:1px solid var(--line); align-items:start}
  .srow:last-child{border-bottom:0}
  .srow .ico{margin:0}
  .srow h3{font-size:22px; margin:0 0 8px}
  .srow p{margin:0 0 10px; color:var(--ink-soft)}
  .srow .yg{font-size:15.5px; color:var(--ink-soft)}
  .srow .yg b{color:var(--ink); font-weight:600}

  .person{background:#fff; border:1px solid var(--line); border-radius:14px; padding:30px; box-shadow:var(--shadow)}
  .person .av{width:58px; height:58px; border-radius:50%; background:var(--emerald); color:#fff; font-size:24px; font-weight:700; display:flex; align-items:center; justify-content:center}
  .person h3{font-size:21px; margin:18px 0 2px}
  .person .role{color:var(--emerald-d); font-weight:600; font-size:16px; margin-bottom:12px}
  .person p{color:var(--ink-soft); font-size:16.5px; margin:0}
  .note{background:var(--mist); border:1px solid var(--line); border-radius:12px; padding:24px 26px; color:var(--ink-soft); font-size:17px; margin-top:30px}

  .cinfo{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:20px}
  .cbox{background:#fff; border:1px solid var(--line); border-radius:12px; padding:28px; box-shadow:var(--shadow)}
  .cbox h3{font-size:18px; margin-bottom:10px}
  .cbox a{font-weight:600}

  .cta-band{background:var(--slate)}
  .cta-band .wrap{padding:88px 32px; text-align:center; color:#fff}
  .cta-band h2{color:#fff; font-size:clamp(30px,4vw,46px); max-width:20ch; margin:0 auto}
  .cta-band p{color:#cfd8dc; max-width:52ch; margin:18px auto 0; font-size:18px}
  .cta-band .cta{margin-top:28px; display:flex; gap:13px; justify-content:center; flex-wrap:wrap}

  footer{background:var(--slate-deep); color:#a3b1ba}
  footer .top{padding:60px 32px 42px; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:32px}
  footer .brand{color:#fff; margin-bottom:14px}
  footer .brand .mk{width:28px; height:28px}
  footer h4{color:#fff; font-size:14.5px; font-weight:700; margin-bottom:14px}
  footer a{color:#a3b1ba; display:block; margin:10px 0; font-size:15px; cursor:pointer}
  footer a:hover{color:#fff; text-decoration:none}
  footer .contact{font-size:15px; color:#a3b1ba; line-height:1.75}
  footer .contact a{display:inline}
  .indep{color:#788690; font-size:13.5px; max-width:42ch; margin-top:16px; line-height:1.55}
  .fbar{border-top:1px solid var(--line-2)}
  .fbar .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:20px 32px; font-size:13.5px; color:#788690}
  .fbar a{color:#788690; cursor:pointer}
  .fbar a:hover{color:#fff; text-decoration:none}

  @media (max-width:1040px){
    .grid4{grid-template-columns:1fr 1fr}
    .grid3{grid-template-columns:1fr}
    .data .row{grid-template-columns:1fr; gap:34px}
    .steps{grid-template-columns:1fr}
    footer .top{grid-template-columns:1fr 1fr 1fr}
  }
  @media (max-width:640px){
    .menu,.util{display:none}
    .navtoggle{display:inline-flex}
    .grid4,.grid2,.cinfo{grid-template-columns:1fr}
    .caps{margin-top:-40px}
    footer .top{grid-template-columns:1fr 1fr}
  }

  .brand:hover{text-decoration:none}