/* Hadaq public site: the approved first design. Navy hero with the folded ribbon, pill buttons, glass preview,
   white working sections. Two font families (IBM Plex Sans Arabic for text, Noto Kufi Arabic for headlines). */
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:'Noto Kufi Arabic';font-weight:700;font-display:swap;src:url(fonts/noto-kufi-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Noto Kufi Arabic';font-weight:800;font-display:swap;src:url(fonts/noto-kufi-arabic-arabic-800-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  --navy:#102542;--navy-2:#0B1B33;--navy-3:#08162A;--navy-4:#183258;
  --violet:#5B4AF8;--lav:#8065C6;--blue:#2162C0;
  --grad:linear-gradient(135deg,#8065C6 0%,#5B4AF8 48%,#2162C0 100%);
  --paper:#F4F6FA;--ink:#102542;--body:#46536B;--mute:#5F6C82;--line:#E1E6EE;
  --ok:#2E9E73;--warn:#C98A1F;
  --f-ui:'IBM Plex Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif;
  --f-disp:'Noto Kufi Arabic','IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
  --gut:max(20px,env(safe-area-inset-left,0px));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 17px/1.85 var(--f-ui);color:var(--body);background:#fff;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid #A596FF;outline-offset:3px;border-radius:6px}
.wrap{width:min(1200px,100% - 2*var(--gut));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border:0;border-radius:999px;font:600 16.5px var(--f-ui);white-space:nowrap;cursor:pointer}
.btn.sm{height:44px;padding:0 22px;font-size:15px}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 14px 34px -8px rgba(91,74,248,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-grad:hover{filter:brightness(1.08)}
.btn-white{background:#fff;color:var(--navy)}
.btn-ghost{border:1px solid rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.05)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-line{border:1px solid #CDD6E3;color:var(--navy);background:#fff}
.btn[disabled]{opacity:.6;cursor:wait}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;isolation:isolate;min-height:min(900px,100svh + 120px);
  background:linear-gradient(160deg,#10294B 0%,#0B1B33 52%,#08162A 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url(img/ribbon.svg) no-repeat left top/auto 104%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(1.5px 1.5px at 6% 18%,rgba(255,255,255,.75),transparent),radial-gradient(1.2px 1.2px at 14% 62%,rgba(255,255,255,.5),transparent),
   radial-gradient(1.6px 1.6px at 24% 8%,rgba(255,255,255,.6),transparent),radial-gradient(1.2px 1.2px at 33% 74%,rgba(255,255,255,.45),transparent),
   radial-gradient(1.5px 1.5px at 47% 28%,rgba(255,255,255,.55),transparent),radial-gradient(1.2px 1.2px at 58% 88%,rgba(255,255,255,.4),transparent),
   radial-gradient(1.6px 1.6px at 66% 14%,rgba(255,255,255,.6),transparent),radial-gradient(1.2px 1.2px at 78% 55%,rgba(255,255,255,.45),transparent),
   radial-gradient(1.5px 1.5px at 91% 30%,rgba(255,255,255,.6),transparent),radial-gradient(1.2px 1.2px at 95% 80%,rgba(255,255,255,.4),transparent)}
[dir=ltr] .hero::before{transform:scaleX(-1)}
.nav{display:flex;align-items:center;gap:36px;height:104px}
.nav .logo img{height:54px;width:auto;display:block}
.nav ul{display:flex;gap:32px}
.nav ul a{font:500 15.5px var(--f-ui);color:rgba(255,255,255,.8)}
.nav ul a:hover{color:#fff}
.nav .sp{margin-inline-start:auto;display:flex;align-items:center;gap:22px}
.nav .login{display:inline-flex;align-items:center;gap:8px;font:500 15.5px var(--f-ui);color:#fff}
.lang{font:500 14px var(--f-ui);color:rgba(255,255,255,.78);padding:6px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:none;cursor:pointer}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:36px 0 120px}
.hero-copy{grid-column:1;max-width:620px}
.pill{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);font:500 14.5px var(--f-ui);color:rgba(255,255,255,.86)}
.dm{display:inline-block;width:7px;height:7px;background:#A596FF;transform:rotate(45deg);border-radius:1.5px}
.hero h1{font:800 clamp(46px,7.2vw,94px)/1.17 var(--f-disp);margin:26px 0 22px;color:#fff;text-wrap:balance}
.hero h1 em{font-style:normal;background:linear-gradient(95deg,#fff 0%,#DCD3FF 38%,#A3BCFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{text-wrap:balance;font-size:clamp(17px,1.5vw,20.5px);line-height:1.95;color:rgba(255,255,255,.74);max-width:540px}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.note{margin-top:20px;font-size:14.5px;color:rgba(255,255,255,.62);display:flex;align-items:center;gap:10px}
.hero-art{grid-column:2;position:relative;min-height:560px}

/* glass preview */
.glass{background:linear-gradient(180deg,rgba(27,56,98,.95),rgba(15,34,62,.97));border:1px solid rgba(255,255,255,.13);border-radius:22px;box-shadow:0 50px 100px -30px rgba(1,6,18,.85),inset 0 1px 0 rgba(255,255,255,.12)}
.panel{position:absolute;inset-inline:0;bottom:0;padding:18px;transform:rotate(-2deg)}
[dir=ltr] .panel{transform:rotate(2deg)}
.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;font:600 15px var(--f-ui);color:#fff}
.ph .tg{font:500 11.5px var(--f-ui);padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.72)}
.team{display:flex;direction:ltr;align-items:center}
.team i{width:30px;height:30px;margin-left:-8px;border-radius:50%;border:2px solid #17335C;display:grid;place-items:center;font:600 11px var(--f-ui);font-style:normal;color:#fff}
.team i:nth-child(1){background:#5B4AF8}.team i:nth-child(2){background:#2162C0}.team i:nth-child(3){background:#8065C6}
.team .more{width:auto;min-width:30px;padding:0 8px;background:#223F6E;color:#cfd9ee;border-radius:15px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.tile{display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-height:104px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.tile span{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.66)}
.tile b{font:800 30px/1 var(--f-ui);color:#fff}
.tile b.s{font:600 16px/1.3 var(--f-ui)}
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:999px;font-size:11.5px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.84);align-self:flex-start;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:#5CC9A0}
.chip.warn::before{background:#E8B35C}
.bar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.bar i{display:block;height:100%;width:72%;background:var(--grad);border-radius:3px}
.tag{position:absolute;display:flex;align-items:center;gap:12px;padding:10px 18px;border-radius:17px;z-index:2;background:linear-gradient(180deg,rgba(31,62,106,.94),rgba(17,38,70,.96));border:1px solid rgba(255,255,255,.15);box-shadow:0 26px 50px -16px rgba(1,6,18,.75)}
.tag .ib{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--grad)}
.tag svg,.ico svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tag b{display:block;font:600 15px/1.35 var(--f-ui);color:#fff}
.tag span{display:block;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.66)}
.tag.t1{top:4%;inset-inline-start:24%}.tag.t2{top:26%;inset-inline-end:2%}.tag.t3{top:34%;inset-inline-start:-2%}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:112px 0}
.kick{display:flex;align-items:center;gap:12px;font:500 15px var(--f-ui);color:var(--mute);margin-bottom:18px}
.kick b{font:500 13px var(--f-ui);color:var(--violet);direction:ltr}
.kick i{width:38px;height:1px;background:currentColor;opacity:.4}
.h2{font:800 clamp(32px,4.4vw,52px)/1.35 var(--f-disp);color:var(--ink);text-wrap:balance}
.lead{font-size:19px;line-height:1.95;max-width:620px;margin-top:16px}
.paper{background:var(--paper)}
.dark{background:linear-gradient(180deg,#0B1B33,#08162A);color:#fff}
.dark .h2{color:#fff}.dark .lead{color:rgba(255,255,255,.72)}.dark .kick{color:rgba(255,255,255,.62)}.dark .kick b{color:#B6A8FF}

/* tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:34px 0 22px}
.tab{height:48px;padding:0 24px;border-radius:999px;border:1px solid #CDD6E3;background:#fff;color:var(--navy);font:500 16px var(--f-ui);cursor:pointer}
.tab[aria-selected=true]{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 12px 26px -12px rgba(91,74,248,.6)}
.stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:30px;align-items:start}
.stage .says h3{font:800 26px/1.5 var(--f-disp);color:var(--ink);margin-bottom:10px}
.stage .says p{color:var(--body)}
.stage .says .fine{margin-top:16px;font-size:14.5px;color:var(--mute)}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 34px 60px -38px rgba(16,37,66,.32);padding:22px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.card-h b{font:600 17px var(--f-ui);color:var(--ink)}
.status{display:inline-flex;align-items:center;gap:8px;padding:3px 12px;border-radius:999px;font:600 13px var(--f-ui);background:#F1EFFF;color:#33279F}
.status.ok{background:#E3F5EC;color:#14684A}.status.wait{background:#FDF0D5;color:#8A5A0C}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px 22px;padding:16px 0}
.kv dt{font-size:13px;color:var(--mute)}.kv dd{margin:0;font:500 15.5px var(--f-ui);color:var(--ink)}
.steps{display:flex;gap:0;margin:6px 0 2px}
.steps li{flex:1;position:relative;padding-top:20px;font-size:13px;color:var(--mute);text-align:center}
.steps li::before{content:"";position:absolute;top:4px;inset-inline:0;height:4px;background:#E1E6EE}
.steps li.on::before{background:var(--grad)}
.steps li.now{color:var(--navy);font-weight:600}
.todo{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--paper);display:flex;gap:12px;align-items:center;font-size:15px;color:var(--ink)}
.list{margin-top:12px;display:grid;gap:8px}
.list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-radius:14px;background:var(--paper);font-size:15px;color:var(--ink)}
.list small{color:var(--mute);font-size:13px}
.hide{display:none!important}

/* meaning */
.entry{display:flex;align-items:center;gap:40px;background:#fff;border:1px solid var(--line);border-radius:28px;padding:30px 40px;box-shadow:0 34px 60px -34px rgba(16,37,66,.28);margin-top:34px}
.entry .word{font:800 clamp(64px,9vw,128px)/1.3 var(--f-disp);color:var(--ink);white-space:nowrap}
.entry .pos{display:flex;align-items:center;gap:10px;font:500 14.5px var(--f-ui);color:var(--violet);margin-bottom:6px}
.entry .def{font:500 clamp(19px,2vw,25px)/1.75 var(--f-ui);color:var(--ink)}
.facets{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:48px}
.facet{position:relative;border-top:1px solid #CBD3E0;padding-top:22px}
.facet::before{content:"";position:absolute;top:-4.5px;inset-inline-start:0;width:8px;height:8px;background:var(--violet);transform:rotate(45deg);border-radius:1.5px}
.facet h3{font:800 24px/1.45 var(--f-disp);color:var(--ink);margin-bottom:4px}

/* benefits */
.who{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.who li{padding:26px 22px;border-radius:22px;background:#fff;border:1px solid var(--line)}
.who .ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--grad);margin-bottom:16px}
.who h3{font:600 18px var(--f-ui);color:var(--ink);margin-bottom:6px}
.who p{font-size:15.5px;line-height:1.8}

/* services */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.svc li{padding:26px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.svc h3{font:800 22px/1.5 var(--f-disp);color:#fff;margin-bottom:10px}
.svc p{font-size:15.5px;line-height:1.9;color:rgba(255,255,255,.74)}
.callout{margin-top:22px;padding:18px 22px;border-radius:18px;border:1px dashed rgba(255,255,255,.24);color:rgba(255,255,255,.8);font-size:15.5px}

/* trial */
.trial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.incl{margin-top:22px;display:grid;gap:12px}
.incl li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px}
.incl li::before{content:"";flex:none;width:9px;height:9px;margin-top:11px;background:var(--violet);transform:rotate(45deg);border-radius:2px}
.quote{padding:34px;border-radius:26px;background:linear-gradient(160deg,#10294B,#0B1B33);color:#fff;box-shadow:0 40px 70px -40px rgba(16,37,66,.8)}
.quote b{display:block;font:800 30px/1.5 var(--f-disp)}
.quote p{margin-top:10px;color:rgba(255,255,255,.72);font-size:16px}

/* faq */
.faq{max-width:860px;margin-top:34px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{display:flex;justify-content:space-between;gap:16px;cursor:pointer;font:600 18px var(--f-ui);color:var(--ink);list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:26px;line-height:1;color:var(--violet)}
details[open] summary::after{content:"−"}
details p{margin-top:10px;max-width:68ch}

/* request */
.req{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:30px;border-radius:26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label,.field legend{font:500 14px var(--f-ui);color:rgba(255,255,255,.82)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#fff;font:400 16px var(--f-ui)}
.field select option{color:#102542}
.field textarea{min-height:96px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.45)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:#A596FF;box-shadow:0 0 0 3px rgba(165,150,255,.3)}
.field .e{font-size:13px;color:#FFB4A8;min-height:1em}
.seg{display:flex;gap:10px;flex-wrap:wrap}
.seg label{position:relative}
.seg input{position:absolute;opacity:0}
.seg span{display:inline-flex;align-items:center;height:46px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,255,255,.26);color:#fff;cursor:pointer;font:500 15.5px var(--f-ui)}
.seg input:checked+span{background:var(--grad);border-color:transparent}
.seg input:focus-visible+span{outline:3px solid #A596FF;outline-offset:2px}
.state{grid-column:1/-1;padding:14px 16px;border-radius:14px;font-size:15.5px}
.state.err{background:rgba(255,120,100,.14);border:1px solid rgba(255,150,130,.4);color:#FFD2C9}
.state.ok{background:rgba(92,201,160,.14);border:1px solid rgba(92,201,160,.4);color:#C9F2E0}
.state.load{background:rgba(255,255,255,.08);color:#fff}
.fine2{grid-column:1/-1;font-size:13.5px;color:rgba(255,255,255,.58)}
footer{background:#08162A;color:rgba(255,255,255,.7);padding:46px 0 56px;font-size:15px}
footer .wrap{display:flex;gap:28px;justify-content:space-between;flex-wrap:wrap;align-items:center}
footer img{height:46px;width:auto}
footer .links{display:flex;gap:24px;flex-wrap:wrap}
footer small{display:block;width:100%;color:rgba(255,255,255,.5);font-size:13.5px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav ul,.nav .login,.nav .sp .btn{display:none}
  .burger{display:inline-grid;place-items:center}
  .nav.open ul{display:flex;position:absolute;inset-inline:var(--gut);top:92px;z-index:20;flex-direction:column;gap:4px;padding:16px;border-radius:20px;background:#0F2444;border:1px solid rgba(255,255,255,.14)}
  .nav.open ul a{display:block;padding:10px 12px;font-size:17px}
  .hero-grid{grid-template-columns:1fr;padding-bottom:70px}
  .hero-art{grid-column:1;min-height:520px;margin-top:18px}
  .stage,.trial,.req{grid-template-columns:1fr}
  .who{grid-template-columns:repeat(2,1fr)}
  .svc,.facets{grid-template-columns:1fr}
  .sec{padding:76px 0}
  .entry{flex-direction:column;align-items:flex-start;gap:12px;padding:24px}
  .hero::before{background-size:auto 400px;opacity:.9}
}
@media (max-width:560px){
  body{font-size:16px}
  .who{grid-template-columns:1fr}
  .form{grid-template-columns:1fr;padding:20px}
  .tiles{grid-template-columns:1fr 1fr}
  .tile:last-child{grid-column:1/-1}
  .tag.t3{display:none}
  .tag.t1{inset-inline-start:6%}
  .hero-art{min-height:480px}
  .btn{width:100%}
  .cta .btn{flex:1 1 100%}
  .tab{flex:1 1 100%}
}
@media (prefers-reduced-motion:no-preference){.panel{animation:rise .6s ease-out both}@keyframes rise{from{opacity:0;transform:translateY(14px) rotate(-2deg)}to{opacity:1}}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

dialog{border:0;border-radius:24px;padding:28px;width:min(440px,100% - 32px);background:#fff;color:var(--body);box-shadow:0 40px 80px -30px rgba(1,6,18,.7)}
dialog::backdrop{background:rgba(8,22,42,.7)}
dialog h2{font:800 26px/1.4 var(--f-disp);color:var(--ink);margin-bottom:8px}
dialog p{margin-bottom:18px;font-size:15.5px}
dialog .field label{color:var(--ink-2,#46536B)}
dialog .field input{background:#fff;color:var(--ink);border:1px solid #CDD6E3}
dialog .field .e{color:#B3261E}
dialog .row{display:flex;gap:10px;margin-top:16px}

.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
dialog .demo-link{margin:6px 0 0;font-size:15px}
dialog .demo-link a{color:var(--vio);font-weight:500;text-decoration:underline}