/* ===== Logo Theme & Hero Only ===== */
:root{
  --bg:#f6e7bc;        /* logo cream */
  --ink:#0f6c7b;       /* logo teal */
  --accent:#ef7a00;    /* logo orange */
  --text:#06343c;      /* darker ink for text */
}
html,body{background:var(--bg)}

.va-hero-only{position:relative;min-height:calc(100vh - 120px);display:grid;place-items:center;padding:24px;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
  border:1px solid rgba(0,0,0,.05); box-shadow:0 30px 80px rgba(0,0,0,.06) inset;
}
.va-hero-only.va-theme-logo{color:var(--text)}
.va-hero-bg{position:absolute;inset:0;overflow:hidden}
.orb{position:absolute;filter:blur(40px);opacity:.35;animation:float 14s ease-in-out infinite}
.orb-1{width:360px;height:360px;background:var(--accent);top:-80px;right:-60px;animation-delay:-2s}
.orb-2{width:300px;height:300px;background:#ffd36b;bottom:-80px;left:-60px;animation-delay:-6s}
.orb-3{width:260px;height:260px;background:var(--ink);top:40%;left:45%;animation-delay:-10s;opacity:.25}
.shine{position:absolute;inset:-10%;background:radial-gradient(800px 300px at 70% -10%, rgba(255,255,255,.6), transparent 60%), radial-gradient(1000px 600px at -10% 110%, rgba(255,255,255,.4), transparent 50%);mix-blend:screen;pointer-events:none}
.bg-logo{position:absolute;inset:auto -6% -12% auto;width:36vw;opacity:.08;filter:saturate(1.2)}

.va-hero-wrap{position:relative;display:grid;grid-template-columns:1fr .9fr;gap:28px;align-items:center;z-index:1;max-width:1200px;width:100%}
.brand-mark{height:72px;display:block;filter:drop-shadow(0 6px 16px rgba(0,0,0,.08));animation:fadeUp .9s ease both .1s}
.title{font-size:56px;line-height:1.06;margin:8px 0 6px;color:var(--ink);animation:fadeUp .9s ease both .2s}
.subtitle{margin:0 0 16px;color:#2f6068;font-size:18px;animation:fadeUp .9s ease both .3s}
.cta{display:flex;gap:12px;animation:fadeUp .9s ease both .4s}
.btn{display:inline-block;background:var(--ink);color:#fff;border:2px solid transparent;padding:12px 16px;border-radius:12px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn:hover{transform:translateY(-2px)}
.va-hero-photo{display:grid;place-items:center;perspective:1000px}
.frame{border-radius:18px;border:2px solid var(--accent);background:#fff0; padding:8px; box-shadow:0 20px 50px rgba(0,0,0,.12); animation:reveal .9s ease both .2s}
.portrait{display:block;width:100%;max-width:420px;aspect-ratio:3/4;object-fit:cover;border-radius:12px;transform:rotateX(0) rotateY(0);will-change:transform;transition:transform .3s ease}

/* Preloader */
.preloader{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;z-index:9999;transition:opacity .5s ease, visibility .5s ease}
.preloader.hidden{opacity:0;visibility:hidden}
.preloader-inner{display:grid;place-items:center;gap:14px}
.preloader-logo{width:96px;height:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.12))}
.preloader-ring{width:48px;height:48px;border-radius:50%;border:3px solid rgba(0,0,0,.1);border-top-color:var(--accent);animation:spin 1s linear infinite}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-20px,0) scale(1.05)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes reveal{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

@media (max-width: 980px){
  .va-hero-wrap{grid-template-columns:1fr;gap:18px}
  .title{font-size:42px}
  .portrait{max-width:380px}
}