/* AngelsRO Ragnarok refresh: continuous honeycomb, bright game art and playful UI. */
:root {
  --hex-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72.8' viewBox='0 0 72 72.8'%3E%3Cg fill='%23d9f2ff' fill-opacity='.23' stroke='%23266f9e' stroke-opacity='.23' stroke-width='1.2'%3E%3Cpath d='M18 0 36 10.4v20.8L18 41.6 0 31.2V10.4zM54 0l18 10.4v20.8L54 41.6 36 31.2V10.4zM36 31.2l18 10.4v20.8L36 72.8 18 62.4V41.6z'/%3E%3C/g%3E%3C/svg%3E");
}
body { background-image:var(--hex-pattern),radial-gradient(ellipse at 12% 34%,rgba(244,137,168,.11),transparent 34%),radial-gradient(ellipse at 88% 76%,rgba(69,181,207,.13),transparent 36%),linear-gradient(180deg,#f9fcff,#eef7ff 70%,#fff8ed); }
.hero {
  min-height: 760px; height: auto; padding: 142px 0 82px;
  background: radial-gradient(ellipse at 79% 26%,rgba(255,214,115,.24),transparent 32%),linear-gradient(135deg,#e8f7ff,#f6fbff 52%,#fff4e8);
  isolation:isolate;
}
.hero-media { display:none !important; }
.hero-overlay { background-image: var(--hex-pattern),radial-gradient(ellipse at 12% 70%,rgba(96,202,217,.16),transparent 38%),linear-gradient(120deg,rgba(250,253,255,.54),rgba(249,252,255,.08)); }
.hero-overlay::after { background:linear-gradient(180deg,transparent 60%,rgba(239,248,255,.84)); }
.hero::before { content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(circle at 18% 28%,rgba(255,255,255,.86) 0 1px,transparent 2px),radial-gradient(circle at 83% 25%,rgba(255,213,119,.75) 0 1.5px,transparent 3px),radial-gradient(circle at 68% 68%,rgba(255,255,255,.76) 0 1px,transparent 2px),radial-gradient(ellipse at 76% 36%,rgba(91,194,220,.18),transparent 32%),radial-gradient(ellipse at 16% 75%,rgba(239,132,166,.13),transparent 28%);background-size:280px 240px,360px 320px,220px 250px,100% 100%,100% 100%;animation:ro-sparkle-drift 24s ease-in-out infinite alternate; }
.hero-content { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(28px,4vw,60px); width:min(1240px,calc(100% - 64px)); margin-inline:auto; }
.hero-copy { max-width:620px; }
.ro-kicker-icon { display:inline-grid; place-items:center; width:34px;height:34px; margin-right:8px; border-radius:11px; color:#fff; font-weight:900; background:linear-gradient(135deg,#f2a347,#ef6e68); box-shadow:0 5px 15px #ef987044; transform:rotate(-4deg); }
.hero-kicker { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hero-title { font-size:clamp(2.55rem,4.6vw,4.5rem); line-height:1.14; overflow:visible; }
.hero-title .gold { line-height:1.18; padding-bottom:.08em; overflow:visible; }
.hero-illustration { position:relative;width:100%;max-width:520px;height:auto!important;min-height:0;align-self:center;display:block;margin:0 auto;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;transform:translateY(0);transition:transform .35s ease; }
.hero-illustration:hover { transform:translateY(-5px);box-shadow:none; }
.hero-illustration img { display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:5px solid rgba(255,255,255,.94);border-radius:50%;box-shadow:0 0 0 1px rgba(225,177,105,.75),0 28px 76px rgba(37,75,120,.24),0 0 52px rgba(245,179,83,.19); }
.hero-illustration figcaption { display:flex;justify-content:center;gap:12px;max-width:100%;width:max-content;margin:14px auto 0;padding:9px 15px;border:1px solid rgba(63,141,179,.15);border-radius:999px;background:rgba(255,255,255,.78);box-shadow:0 8px 24px rgba(37,75,120,.08);color:#3c607d;font-size:.78rem;font-weight:750; }
.hero-art-badge { color:#a75273;animation:poring-float 3.8s ease-in-out infinite; }
.hero-art-badge b { color:#ef87a6; }
.hero-note { display:flex; align-items:center; gap:8px; }
.online-pulse { box-shadow:0 0 0 5px rgba(68,182,137,.12); }
.launch-panel { border-radius:24px; border-color:#dcecf5; }
.btn-gold { background:linear-gradient(135deg,#f2a341,#f27c61 55%,#df6795); box-shadow:0 10px 24px rgba(226,130,88,.24); }
.btn-gold:hover { box-shadow:0 15px 32px rgba(226,130,88,.32); }
.reward-card,.feature-card,.spec-card,.form-card,.faq-list details,.mini-progress { transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.reward-card:hover,.feature-card:hover,.faq-list details:hover { transform:translateY(-4px); box-shadow:0 18px 38px rgba(33,75,115,.13); }
.reward-icon { color:#db7a69; background:linear-gradient(145deg,#fff2e8,#fff8eb); border-color:#f5d6bb; }
.feature-icon { color:#398eae; }
.brand-emblem { display:inline-grid; width:54px;height:54px;place-items:center; flex:none; overflow:hidden;border:2px solid rgba(255,220,145,.92);border-radius:50%;background:#061d50;box-shadow:0 0 0 4px rgba(56,166,206,.09),0 7px 18px rgba(33,75,115,.16);transition:transform .25s ease,box-shadow .25s ease; }
.brand-emblem img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
.brand:hover .brand-emblem { transform:translateY(-2px) rotate(-5deg);box-shadow:0 0 0 5px rgba(241,143,174,.14),0 9px 22px rgba(33,75,115,.18); }
.credential-grid { display:grid;grid-template-columns:1fr 1fr;gap:0 14px; }
.credential-grid .field { min-width:0; }
.form-card { border-radius:24px; }
.field input,.field select { width:100%; color:#193650;border-color:rgba(37,88,132,.2);border-radius:10px;background:#fbfdff; }
.field select { min-height:48px;padding:0 12px; }
/* Connected hexagon motif: visible in each light section and the hero. */
.rewards,.features,.details,.prereg,.faq { background-image:var(--hex-pattern),radial-gradient(ellipse at 11% 20%,rgba(240,142,177,.10),transparent 31%),radial-gradient(ellipse at 86% 80%,rgba(69,181,207,.12),transparent 34%),linear-gradient(180deg,#f9fcff,#eff7fd 58%,#fffaf2); }
.rewards,.features,.details,.prereg,.faq { background-size:72px 72.8px,190% 190%,190% 190%,100% 100%;background-position:0 0,0% 15%,100% 85%,0 0;animation:ro-section-glow 38s ease-in-out infinite alternate; }
.rewards::before { opacity:.68; background-image:var(--hex-pattern),radial-gradient(ellipse at 70% 36%,rgba(246,175,89,.18),transparent 46%); }
.prereg::before { display:none !important; background:none !important; }
.section-head h2 .script,.prereg-copy h2 .script,.details-copy h2 .script,.faq-head h2 .script,.section-head h2 span.gold,.prereg-copy h2 span.gold,.details-copy h2 span.gold,.faq-head h2 span.gold { display:block; line-height:1.24; padding-bottom:.1em; overflow:visible; }
.faq { position:relative;isolation:isolate;overflow:hidden;background-color:#07142d;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='84' viewBox='0 0 96 84'%3E%3Cg fill='none' stroke='%2376bee5' stroke-opacity='.15' stroke-width='1'%3E%3Cpath d='M24 0 48 14v28L24 56 0 42V14zM72 0 96 14v28L72 56 48 42V14zM48 42l24 14v28L48 98 24 84V56z'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(ellipse at 8% 22%,rgba(90,83,191,.30),transparent 40%),radial-gradient(ellipse at 92% 78%,rgba(30,151,193,.22),transparent 42%),linear-gradient(135deg,#07142d,#102348 54%,#07172d);background-size:96px 84px,190% 190%,180% 180%,100% 100%;background-position:0 0,0% 20%,100% 80%,0 0;animation:ro-faq-aurora 42s ease-in-out infinite alternate; }
.faq::before { content:"";position:absolute;z-index:0;inset:2% auto 2% 0;width:36%;pointer-events:none;background:url("/assets/angelsro-poring-logo.jpg") left 48% center / min(310px,28vw) auto no-repeat;opacity:.13;mask-image:radial-gradient(ellipse at 38% 48%,#000 12%,transparent 72%); }
.faq::after { content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background-image:radial-gradient(circle at 14% 24%,rgba(255,239,190,.8) 0 1px,transparent 2px),radial-gradient(circle at 84% 31%,rgba(150,226,255,.75) 0 1.2px,transparent 2.4px),radial-gradient(circle at 70% 82%,rgba(255,204,134,.65) 0 1px,transparent 2px);background-size:260px 230px,340px 300px,220px 270px;opacity:.48;animation:ro-faq-stars 32s linear infinite alternate; }
.faq-grid { position:relative;z-index:1; }
.faq-head h2 { color:#f6f7ff; font-family:var(--display);text-shadow:0 4px 26px rgba(98,154,240,.2); }
.faq-head h2 .gold { background:linear-gradient(115deg,#ffe6aa 5%,#ffd06e 48%,#a7e8ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent; }
.faq-head .eyebrow { color:#9edcf5; }
.faq-head .eyebrow::before { background:#ffcf72;box-shadow:0 0 14px rgba(255,207,114,.55); }
.faq-head > p:not(.eyebrow) { color:#bdcce1; }
.faq-list { display:grid;gap:12px;border:0; }
.faq-list details { position:relative;overflow:hidden;border:1px solid rgba(151,199,234,.2);border-radius:15px;background:linear-gradient(130deg,rgba(18,42,79,.91),rgba(12,31,62,.88));box-shadow:0 12px 30px rgba(2,9,24,.18),inset 0 1px rgba(255,255,255,.045);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,background .24s ease; }
.faq-list details:hover { transform:translateY(-2px);border-color:rgba(255,210,125,.45);box-shadow:0 16px 34px rgba(2,9,24,.28),0 0 24px rgba(91,181,222,.08); }
.faq-list details[open] { border-color:rgba(255,210,125,.62);background:linear-gradient(130deg,rgba(25,52,91,.98),rgba(13,36,70,.96));box-shadow:0 18px 38px rgba(2,9,24,.28),0 0 26px rgba(88,178,219,.11); }
.faq-list summary { padding:19px 48px 19px 48px;color:#f1f5ff;font-size:.86rem;line-height:1.55; }
.faq-list summary::before { content:"✧";position:absolute;left:20px;top:50%;color:#88d9f2;font-size:1.1rem;line-height:1;transform:translateY(-50%);text-shadow:0 0 12px rgba(136,217,242,.5); }
.faq-list summary:hover,.faq-list details[open] summary { color:#ffe1a0; }
.faq-list summary::after { right:20px;color:#ffd076;font-size:1.35rem;text-shadow:0 0 12px rgba(255,208,118,.35); }
.faq-list details p { padding:0 48px 21px;color:#c3d0e3;font-size:.8rem;line-height:1.8; }
.faq-list details p a { color:#a9e5ff; }
@keyframes ro-faq-aurora { from {background-position:0 0,0% 20%,100% 80%,0 0;} to {background-position:0 0,100% 84%,0% 16%,0 0;} }
@keyframes ro-faq-stars { from {background-position:0 0,0 0,0 0;} to {background-position:70px 50px,-95px 80px,45px -60px;} }
@keyframes ro-sparkle-drift { from {background-position:0 0,0 0,0 0,0 0,0 0;} to {background-position:90px 55px,-75px 65px,48px -60px,0 0,0 0;} }
@keyframes ro-section-glow { from {background-position:0 0,0% 15%,100% 85%,0 0;} to {background-position:0 0,100% 85%,0% 15%,0 0;} }
@keyframes poring-float { 0%,100% {transform:translateY(0);} 50% {transform:translateY(-3px);} }
@media (max-width:1040px) {
 .hero-content { grid-template-columns:minmax(0,1fr);max-width:760px;width:min(100% - 48px,760px);gap:38px; }
 .hero-copy { max-width:720px;margin-inline:auto;text-align:center; }
 .hero-kicker,.hero-note,.hero-actions { justify-content:center; }
 .hero-title { font-size:clamp(2.5rem,6vw,4.1rem); }
 .hero-illustration { max-width:440px; }
 .hero { padding-top:125px; }
}
@media (max-width:600px) {
 .hero-content { width:min(100% - 32px,520px);gap:28px; }
 .hero { min-height:0;padding:116px 0 56px; }
 .hero-title { font-size:clamp(2.45rem,12vw,3.5rem); }
 .hero-illustration { max-width:min(100%,460px);padding:6px;border-radius:20px; }
 .hero-illustration img { border-radius:14px; }
 .hero-illustration figcaption { font-size:.72rem; }
 .credential-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .hero-illustration,.reward-card,.feature-card,.faq-list details { transition:none; } .hero::before,.hero-art-badge,.rewards,.features,.details,.prereg,.faq,.faq::after { animation:none !important; } }