
:root{--bg:#050505;--panel:rgba(19,19,23,.64);--panel2:rgba(8,8,12,.76);--gold:#f5b642;--gold2:#ffd36d;--text:#f7f4ed;--muted:#a9a7ad;--line:rgba(255,255,255,.10);--cyan:#55e6d3;--blue:#59a7ff;--violet:#c77dff;--danger:#ff6d79;--shadow:0 24px 80px rgba(0,0,0,.45);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;color:var(--text);background:radial-gradient(1200px 700px at 75% -10%,rgba(245,182,66,.14),transparent 55%),radial-gradient(800px 600px at -10% 20%,rgba(89,167,255,.10),transparent 55%),#050505;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:100;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E")}
.aurora{position:fixed;width:52vw;height:52vw;filter:blur(90px);border-radius:50%;opacity:.08;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}.a1{background:#f0a61f;right:-18vw;top:-20vw}.a2{background:#6f4cff;left:-25vw;top:35vh;animation-delay:-6s}.a3{background:#20d7c5;right:-25vw;top:68vh;animation-delay:-12s}@keyframes drift{to{transform:translate3d(4vw,5vh,0) scale(1.12)}}
.container{width:min(1180px,calc(100% - 42px));margin:auto}.glass{background:linear-gradient(140deg,rgba(255,255,255,.085),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px rgba(255,255,255,.08),var(--shadow);backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%)}
nav{position:sticky;top:0;z-index:50;padding:14px 0;background:linear-gradient(180deg,rgba(5,5,5,.94),rgba(5,5,5,.62));backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.05)}.nav-inner{display:flex;align-items:center;gap:22px}.brand{display:flex;align-items:center;gap:12px;min-width:210px}.brand img{height:34px;max-width:155px;object-fit:contain}.brand span{font-size:11px;letter-spacing:.18em;color:#c9c6c0}.links{display:flex;gap:6px;margin-left:auto;align-items:center}.links a{font-size:13px;color:#c8c6ca;padding:10px 12px;border-radius:999px}.links a:hover{background:rgba(255,255,255,.06);color:white}.cta{border:1px solid rgba(245,182,66,.45)!important;color:var(--gold2)!important;background:rgba(245,182,66,.07)}.menu-btn{display:none;margin-left:auto;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;border-radius:12px;padding:9px 12px}
.hero{padding:100px 0 72px;position:relative}.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold2);font-weight:700}.hero h1{font-size:clamp(54px,7.6vw,108px);line-height:.92;letter-spacing:-.055em;margin:18px 0 22px;max-width:980px}.hero h1 .gold{background:linear-gradient(110deg,#fff1b8,#f8b63f 48%,#fff0b4);-webkit-background-clip:text;color:transparent}.hero p{font-size:clamp(18px,2vw,25px);line-height:1.55;color:#c4c1c7;max-width:820px;margin:0 0 34px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{padding:13px 19px;border-radius:999px;font-size:14px;font-weight:700;border:1px solid var(--line);transition:.25s}.btn.primary{background:linear-gradient(120deg,#c47c0d,#ffc857);color:#090704;border-color:rgba(255,220,133,.65);box-shadow:0 12px 40px rgba(245,182,66,.2)}.btn:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(0,0,0,.35)}
.hero-grid{margin-top:64px;display:grid;grid-template-columns:1.05fr .95fr;gap:18px}.hero-card{border-radius:28px;padding:28px;min-height:250px;position:relative;overflow:hidden}.hero-card:before{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at var(--mx,60%) var(--my,20%),rgba(255,209,103,.16),transparent 28%);pointer-events:none}.orbit{position:absolute;width:280px;height:280px;border:1px solid rgba(255,210,111,.2);border-radius:50%;right:-80px;bottom:-110px}.orbit:before,.orbit:after{content:"";position:absolute;border:1px solid rgba(85,230,211,.16);border-radius:50%;inset:35px}.orbit:after{inset:75px;border-color:rgba(199,125,255,.18)}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0 0}.kpi{border-radius:18px;padding:18px;border:1px solid var(--line);background:rgba(255,255,255,.035)}.kpi strong{display:block;font-size:28px;color:#fff}.kpi span{display:block;color:#a9a7ad;font-size:12px;margin-top:5px}
.section{padding:82px 0}.section.tight{padding:50px 0}.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:30px}.section-head h2{font-size:clamp(36px,5vw,66px);line-height:1;margin:8px 0 0;letter-spacing:-.04em}.section-head p{max-width:520px;color:#a9a7ad;line-height:1.7}.pill{display:inline-flex;padding:8px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.1);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#ccc;background:rgba(255,255,255,.035)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{border-radius:24px;padding:24px;min-height:240px;position:relative;overflow:hidden;transition:.35s ease}.card:hover{transform:translateY(-5px);border-color:rgba(255,211,109,.28)}.card .icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.1);font-weight:900;color:var(--accent,var(--gold))}.card h3{font-size:23px;margin:24px 0 7px}.card h4{font-size:12px;color:var(--accent,var(--gold2));letter-spacing:.13em;text-transform:uppercase;margin:0 0 13px}.card p{color:#a8a6ab;font-size:14px;line-height:1.65;margin:0}.card .arrow{position:absolute;right:20px;bottom:18px;font-size:20px;color:#68676c}.card:hover .arrow{color:var(--accent,var(--gold2));transform:translateX(3px)}
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.pillar{border-radius:26px;padding:28px;min-height:370px;position:relative;overflow:hidden}.pillar h3{font-size:32px;margin:18px 0 12px}.pillar p{color:#b1aeb4;line-height:1.65}.pillar .line{height:2px;width:100%;background:linear-gradient(90deg,var(--accent),transparent);margin:26px 0}.pillar ul{list-style:none;padding:0;margin:0}.pillar li{padding:9px 0;color:#d5d2d6;border-bottom:1px solid rgba(255,255,255,.055);font-size:14px}
.flow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.flow .node{padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);font-size:13px}.flow .sep{color:#5f6068}.banner{border-radius:30px;padding:34px;display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:center}.banner h3{font-size:38px;margin:0 0 12px}.banner p{color:#b1aeb4;line-height:1.7}.brandmark{display:grid;place-items:center}.brandmark img{width:min(280px,80%);filter:drop-shadow(0 24px 45px rgba(0,0,0,.5))}
.product-hero{padding:88px 0 54px}.product-hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}.product-title{font-size:clamp(56px,8vw,105px);line-height:.95;margin:12px 0 18px;letter-spacing:-.055em}.product-sub{font-size:21px;color:var(--accent,var(--gold2));font-weight:700}.product-lead{font-size:18px;color:#b8b5bc;line-height:1.7;max-width:760px}.product-art{border-radius:32px;min-height:380px;position:relative;display:grid;place-items:center;overflow:hidden}.sigil{width:210px;height:210px;border-radius:44px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.025));display:grid;place-items:center;box-shadow:inset 0 1px rgba(255,255,255,.12),0 40px 80px rgba(0,0,0,.45);transform:rotate(-5deg)}.sigil span{font-size:74px;font-weight:900;color:var(--accent,var(--gold2));text-shadow:0 0 40px color-mix(in srgb,var(--accent,var(--gold2)) 45%,transparent)}
.content-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.content-box{border-radius:22px;padding:24px}.content-box h3{margin:0 0 12px;font-size:21px}.content-box p,.content-box li{color:#aaa8ae;line-height:1.7;font-size:14px}.content-box ul{padding-left:20px}.wide{grid-column:1/-1}.quote{font-size:30px;line-height:1.35;color:#f3ede0;border-left:2px solid var(--gold);padding-left:22px;margin:0}
.founder{display:grid;grid-template-columns:.75fr 1.25fr;gap:30px;align-items:stretch}.portrait{border-radius:30px;overflow:hidden;min-height:510px}.portrait img{width:100%;height:100%;object-fit:cover}.founder-copy{border-radius:30px;padding:34px}.founder-copy h2{font-size:52px;margin:8px 0 8px}.founder-copy p{color:#b3b0b5;line-height:1.75}.timeline{display:grid;gap:12px;margin-top:22px}.timeline div{padding:14px 16px;border-radius:15px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
footer{padding:60px 0 34px;border-top:1px solid rgba(255,255,255,.07);margin-top:70px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:28px}.footer-grid h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#ddd}.footer-grid p,.footer-grid a{color:#8f8d93;line-height:1.8;font-size:13px;display:block}.legal{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.06);color:#66666b;font-size:12px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

@media(max-width:950px){.links{display:none;position:absolute;top:70px;left:20px;right:20px;flex-direction:column;padding:18px;border-radius:20px;background:rgba(10,10,12,.95);border:1px solid var(--line)}.links.open{display:flex}.menu-btn{display:block}.hero-grid,.product-hero .grid,.banner,.founder{grid-template-columns:1fr}.cards,.triad{grid-template-columns:1fr 1fr}.kpi-row{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr}.brand{min-width:0}}
@media(max-width:640px){.container{width:min(100% - 26px,1180px)}.hero{padding-top:70px}.cards,.triad,.content-grid{grid-template-columns:1fr}.kpi-row{grid-template-columns:1fr 1fr}.section{padding:58px 0}.section-head{display:block}.section-head p{margin-top:18px}.product-art{min-height:280px}.founder-copy h2{font-size:40px}}

/* =========================================================
   TRENDEST / AYA CORPORATE V2 FOUNDATION
   Progressive enhancement + premium glass refinement
   ========================================================= */

/*
 * Content is visible by default.
 * JS adds .motion-ready only after confirming that the
 * browser can safely run the reveal system.
 */
.reveal{
  opacity:1;
  transform:none;
}

/* Only JS-certified motion mode may initially conceal items. */
html.motion-ready .reveal{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:
    opacity .65s cubic-bezier(.22,.61,.36,1),
    transform .65s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}

html.motion-ready .reveal.show{
  opacity:1;
  transform:none;
}

/* Never conceal content for reduced-motion users. */
@media (prefers-reduced-motion:reduce){
  html.motion-ready .reveal,
  html.motion-ready .reveal.show{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  .aurora{
    animation:none !important;
  }

  .card,
  .btn{
    transition:none !important;
  }
}

/* ---------------------------------------------------------
   V2 glass material
   --------------------------------------------------------- */

.glass{
  position:relative;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.105) 0%,
      rgba(255,255,255,.045) 38%,
      rgba(255,255,255,.018) 100%
    );
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 24px 70px rgba(0,0,0,.30),
    var(--shadow);
  backdrop-filter:blur(26px) saturate(155%);
  -webkit-backdrop-filter:blur(26px) saturate(155%);
}

.glass::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(
      circle at var(--mx,72%) var(--my,12%),
      rgba(255,222,148,.10),
      transparent 27%
    );
  opacity:.78;
  mix-blend-mode:screen;
}

/*
 * Keep actual card/content descendants above the optical
 * material layer.
 */
.glass > *{
  position:relative;
  z-index:1;
}

/* ---------------------------------------------------------
   V2 product artwork
   --------------------------------------------------------- */

.product-art{
  isolation:isolate;
  background:
    radial-gradient(
      circle at 72% 24%,
      color-mix(
        in srgb,
        var(--accent,var(--gold2)) 18%,
        transparent
      ),
      transparent 32%
    ),
    radial-gradient(
      circle at 22% 78%,
      rgba(90,215,202,.075),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.018)
    );
}

.product-art::before{
  content:"";
  position:absolute;
  width:310px;
  height:310px;
  border-radius:50%;
  border:1px solid
    color-mix(
      in srgb,
      var(--accent,var(--gold2)) 28%,
      transparent
    );
  box-shadow:
    0 0 80px
      color-mix(
        in srgb,
        var(--accent,var(--gold2)) 12%,
        transparent
      ),
    inset 0 0 60px rgba(255,255,255,.018);
  transform:rotate(-14deg);
  z-index:0;
}

.product-art::after{
  content:"";
  position:absolute;
  width:420px;
  height:160px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  transform:rotate(24deg);
  z-index:0;
}

.sigil{
  position:relative;
  z-index:2;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.155),
      rgba(255,255,255,.028)
    );
  border:1px solid
    color-mix(
      in srgb,
      var(--accent,var(--gold2)) 30%,
      rgba(255,255,255,.14)
    );
  box-shadow:
    inset 0 1px rgba(255,255,255,.17),
    0 35px 90px rgba(0,0,0,.52),
    0 0 65px
      color-mix(
        in srgb,
        var(--accent,var(--gold2)) 11%,
        transparent
      );
}

/* ---------------------------------------------------------
   V2 Founder presentation
   --------------------------------------------------------- */

.founder{
  gap:34px;
}

.portrait{
  position:relative;
  border:1px solid rgba(255,255,255,.11);
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 30px 80px rgba(0,0,0,.42);
  background:#0c0c0d;
}

.portrait::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      transparent 58%,
      rgba(0,0,0,.18)
    );
}

.founder-copy{
  background:
    radial-gradient(
      circle at 90% 0,
      rgba(245,182,66,.09),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,.025)
    );
}

.founder-copy p{
  color:#c3c0c6;
  font-size:15px;
  line-height:1.82;
}

.timeline div{
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.025)
    );
  border-color:rgba(255,255,255,.09);
}

/* ---------------------------------------------------------
   V2 cards / navigation micro-polish
   --------------------------------------------------------- */

.card{
  box-shadow:
    inset 0 1px rgba(255,255,255,.075),
    0 18px 50px rgba(0,0,0,.20);
}

.card:hover{
  box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    0 26px 70px rgba(0,0,0,.34);
}

nav{
  box-shadow:0 10px 40px rgba(0,0,0,.18);
}

/* ---------------------------------------------------------
   V2 responsive refinement
   --------------------------------------------------------- */

@media(max-width:950px){
  .product-art{
    min-height:330px;
  }

  .founder{
    gap:22px;
  }

  .portrait{
    min-height:440px;
    max-height:680px;
  }
}

@media(max-width:640px){
  .product-title{
    font-size:clamp(50px,16vw,72px);
  }

  .product-art{
    min-height:270px;
    border-radius:26px;
  }

  .product-art::before{
    width:230px;
    height:230px;
  }

  .product-art::after{
    width:300px;
    height:120px;
  }

  .sigil{
    width:165px;
    height:165px;
    border-radius:36px;
  }

  .sigil span{
    font-size:58px;
  }

  .portrait{
    min-height:390px;
  }

  .founder-copy{
    padding:26px 22px;
  }

  .founder-copy h2{
    font-size:40px;
  }

  .founder-copy p{
    font-size:14px;
    line-height:1.78;
  }
}
