/* HoopoePro public website — shared look for every public page (menu, buttons, sections, footer).
   Black page, soft pink light at the top, pink buttons with white text, cube colors for small tags. */
@font-face{font-family:"Adventor";src:url(fonts/adventor-bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Adventor";src:url(fonts/adventor-regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Lato";src:url(fonts/lato-normal.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Lato";src:url(fonts/lato-bold.woff) format("woff");font-weight:700;font-display:swap}
:root{
  --bg:#000;--s1:#0b0a10;--s2:#14121b;--s3:#1d1a27;--line:rgba(255,255,255,.07);
  --text:#fff;--soft:rgba(236,232,255,.74);--faint:rgba(220,214,255,.5);
  --pink:#F00EB8;--pink2:#ff3fd0;--cyan:#07D0E0;--sky:#95CEE5;--ice:#CDEBF8;--mint:#BFE3BF;--lime:#D5EE9A;--zest:#E6FD6D;--forest:#233E1B;--yellow:#F2E166;--red:#F14E57;
  --cube:linear-gradient(90deg,var(--ice),var(--sky),var(--mint),var(--lime));
  --head:"Adventor","Century Gothic","Avenir Next",system-ui,sans-serif;--body:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(16px,3.2vw,48px);--r:20px;color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:90px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;color:var(--text);font:400 16px/1.55 var(--body);overflow-x:hidden;background:var(--bg)}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;margin:0;letter-spacing:-.02em}
p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:8px}
.wrap{max-width:1760px;margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.skip{position:absolute;left:-9999px;top:8px;background:var(--pink);color:#fff;padding:8px 14px;border-radius:10px;z-index:100;font-weight:700}
.skip:focus{left:12px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.page-glow{position:absolute;inset:0 0 auto;height:1100px;pointer-events:none;z-index:0;
  display:none}

/* ---------- buttons, tags ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:14px 24px;font:700 15px/1.1 var(--body);cursor:pointer;white-space:nowrap;transition:filter .15s,background .15s,border-color .15s}
.btn-main{background:linear-gradient(180deg,var(--pink2),var(--pink));color:#fff}
.btn-main:hover{filter:brightness(1.1)}
.btn-main:disabled{opacity:.6;cursor:progress}
.btn-line{background:rgba(0,0,0,.35);color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-dark{background:var(--s2);color:#fff}
.btn-dark:hover{background:var(--s3)}
.btn.sm{padding:10px 16px;font-size:14px;border-radius:10px}
.chip{display:inline-flex;align-items:center;gap:7px;font:700 13.5px/1.2 var(--body);padding:8px 14px;border-radius:99px;background:var(--cube);color:var(--forest)}
.tagx{display:inline-block;font:700 10.5px/1 var(--body);letter-spacing:.04em;padding:5px 8px;border-radius:6px;background:var(--cube);color:var(--forest)}
.tagx.hot{background:var(--pink);color:#fff}
.more{color:var(--sky);font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.more:hover{color:#fff}

/* ---------- banner ---------- */
.banner{position:relative;z-index:31;display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 48px;text-align:center;font-weight:700;font-size:14.5px;background:var(--pink);color:#fff}
.banner a{background:rgba(0,0,0,.2);padding:4px 10px;border-radius:7px;white-space:nowrap}
.banner a:hover{background:rgba(0,0,0,.32)}
.banner button{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;display:grid;place-items:center}
.banner button:hover{background:rgba(0,0,0,.18)}
.banner.c-teal,.banner.c-sky{background:var(--sky);color:#06202c}.banner.c-green{background:var(--lime);color:var(--forest)}.banner.c-mustard{background:var(--yellow);color:#2a2400}.banner.c-red{background:var(--red)}

/* ---------- top menu ---------- */
.top{position:sticky;top:0;z-index:30;transition:background .2s,box-shadow .2s}
.top.scrolled{background:rgba(0,0,0,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.top-in{display:flex;align-items:center;gap:28px;height:74px}
.brand{display:flex;align-items:center;gap:9px;font:700 22px/1 var(--head);letter-spacing:-.02em;flex:none}
.brand b{color:var(--cyan)}
.brand img{height:36px;width:auto}
.nav{display:flex;gap:2px}
.nav>a,.nav>button{display:inline-flex;align-items:center;gap:5px;padding:10px 14px;border-radius:10px;border:0;background:none;color:var(--soft);font-size:15px;cursor:pointer}
.nav>a:hover,.nav>button:hover,.nav>button[aria-expanded="true"]{color:#fff;background:var(--s2)}
.nav>button .ic{width:16px;height:16px;transition:transform .2s}
.nav>button[aria-expanded="true"] .ic{transform:rotate(180deg)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:0;background:var(--s2);cursor:pointer;place-items:center}
.mega{position:absolute;left:var(--gut);right:var(--gut);top:calc(100% + 6px);max-width:1664px;margin:0 auto;z-index:40;background:#0d0c13;border-radius:22px;padding:26px;box-shadow:0 40px 100px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06);display:grid;gap:26px}
.mega.cols5{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.3fr)}
.mega.cols4{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr)}
.mega h4{font:700 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.mi{display:flex;gap:12px;align-items:flex-start;padding:8px;margin:0 -8px;border-radius:12px}
.mi:hover,.mi:focus-visible{background:var(--s2)}
.mi img{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none;background:var(--s2)}
.mi .mk{width:40px;height:40px;border-radius:10px;flex:none;display:grid;place-items:center;font:700 12px var(--body);color:var(--forest);background:var(--cube)}
.mi b{display:flex;align-items:center;gap:7px;font-size:14.5px}
.mi small{display:block;color:var(--faint);font-size:12.5px;line-height:1.35;margin-top:1px}
.mega-feat{position:relative;border-radius:18px;overflow:hidden;min-height:320px;display:flex;align-items:flex-end;background:var(--s2)}
.mega-feat video,.mega-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mega-feat::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.9) 10%,transparent 65%)}
.mega-feat div{position:relative;z-index:1;padding:20px}
.mega-feat h3{font-size:24px;margin-top:10px}
.mega-feat p{color:var(--soft);font-size:14px;margin-top:6px}
.mega-feat .btn{margin-top:14px}
.mega-scrim{position:fixed;inset:0;z-index:25;background:rgba(0,0,0,.5)}
.drawer{position:fixed;inset:0;z-index:60;background:#000;overflow-y:auto;padding:16px var(--gut) 40px}
.drawer-h{display:flex;align-items:center;justify-content:space-between;height:58px;margin-bottom:10px}
.drawer details{border-bottom:1px solid var(--line)}
.drawer summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 4px;font:700 19px var(--head)}
.drawer summary::-webkit-details-marker{display:none}
.drawer details[open] summary .ic{transform:rotate(180deg)}
.drawer .dl{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:0 0 16px}
.drawer .dl a{padding:9px 4px;color:var(--soft);font-size:15px}
.drawer>a.dlink{display:block;padding:16px 4px;font:700 19px var(--head);border-bottom:1px solid var(--line)}
.drawer .btn{width:100%;margin-top:22px}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(56px,7vw,100px) 0 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.sec-h h2{font-size:clamp(30px,3.4vw,48px);line-height:1.05;display:flex;align-items:center;gap:14px}
.sec-h h2::before{content:"";width:6px;height:.8em;border-radius:4px;flex:none;background:linear-gradient(180deg,var(--ice),var(--sky),var(--mint),var(--lime))}
.sec-h p{color:var(--soft);margin-top:10px;font-size:clamp(15px,1.3vw,18px);max-width:70ch}
.sec-h.center{flex-direction:column;align-items:center;text-align:center}
.sec-h.center h2::before{display:none}
.grid{display:grid;gap:clamp(10px,1.2vw,18px)}

/* video cards: they play with no sound only while on the screen */
.vbox{position:relative;overflow:hidden;background:var(--s2)}
.vbox img,.vbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vbox video{opacity:0;transition:opacity .35s}
.vbox video.on{opacity:1}

/* ---------- footer ---------- */
.foot{padding:clamp(60px,7vw,100px) 0 0}
.foot-in{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:30px;font-size:14.5px}
.foot-in p{color:var(--soft);max-width:320px;margin-top:14px}
.foot h5{font:700 13.5px var(--body);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot ul a{color:var(--soft)}
.foot ul a:hover{color:#fff}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:40px;height:40px;border-radius:12px;background:var(--s2);display:grid;place-items:center;color:var(--soft)}
.social a:hover{color:#fff;background:var(--s3)}
.foot-b{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--faint);font-size:13.5px;margin-top:50px;padding:22px 0 34px;border-top:1px solid var(--line)}
.foot-b a{color:var(--faint)}.foot-b a:hover{color:#fff}
.foot-big{font:700 clamp(60px,13vw,220px)/.85 var(--head);letter-spacing:-.04em;text-align:center;margin-top:40px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0));-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}

/* ---------- smaller screens ---------- */
@media (max-width:1180px){
  .nav,.top-r .btn{display:none}
  .menu-btn{display:grid}
  .foot-in{grid-template-columns:repeat(3,1fr)}
  .foot-in>div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  .top-in{height:64px}
  .brand{font-size:20px}.brand img{height:32px}
  .foot-in{grid-template-columns:1fr 1fr}
  .banner{font-size:13.5px;padding:9px 44px 9px 14px}
}
/* Oct 27: every pink button has a thin white edge */
.btn-main{border:1px solid rgba(255,255,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}

/* Nov 2: model icons (HoopoePro's own; an official logo only where the company allows it) */
.mk.mic{display:block;padding:0;border:0;background:#100d1f;object-fit:cover}
.mk.mic.on-white{background:#fff;object-fit:contain;padding:12%}
.mk.mic.logo{object-fit:contain;padding:11%}
.mk.mic.logo[src$="openai.svg"]{padding:0}
.mi img[src$="openai.svg"]{padding:1px}
.mi img[src$=".svg"]{object-fit:contain;padding:7px;background:#100d1f}
/* Nov 4: no thin white line around the pink buttons; the pink and its soft glow stay */
.btn-main,.btn-main:hover{border:0!important;box-shadow:0 0 18px rgba(240,14,184,.38)!important}