/* ===========================================================
   BITCOINSUOMI — VISUAALINEN KERROS "Revontuli" (2026-09)
   Sinivalkoinen yötaivas: animoidut revontulet + leijuvat ₿-kolikot
   (main.js: initSkyScene), hehkuvat painikkeet, lasipintaiset kortit
   ja viimeistellyt taulukot. Ladataan style.css:n jälkeen.
   Tietoisesti eri tyyli kuin sisarsivustoilla: pyöreät muodot, jää/aurora.
   =========================================================== */
:root{
  --aurora-1:#3D7BFF; --aurora-2:#6FE3FF; --aurora-3:#8A7CFF;
  --glow-blue:rgba(61,123,255,.45);
  --glass:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  --glass-border:rgba(130,170,255,.16);
}
:root[data-theme="light"]{ --glass:linear-gradient(180deg,#fff,#F6F9FF); --glass-border:#DCE6F5; --glow-blue:rgba(33,88,214,.25); }

/* --- Hero-osiot: aina yötaivas, myös vaaleassa tilassa --- */
.hero, .page-hero{
  --ink:#070F1F; --ink-raised:#0E1A33; --ink-raised-2:#132546; --steel:#223354; --steel-soft:rgba(255,255,255,.06);
  --text-hi:#F4F8FF; --text-mid:#B3C3E2; --text-low:#7486AB; --gold:#4F8CFF; --gold-bright:#8DB8FF;
  --glass:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); --glass-border:rgba(130,170,255,.2);
  --positive:#3FBE83; --negative:#E0685F;
  background:radial-gradient(120% 90% at 70% -10%, #13306A 0%, #0A1733 42%, #070F1F 100%);
  color:var(--text-hi); isolation:isolate;
}
.hero{padding:88px 0 84px; border-bottom:1px solid rgba(130,170,255,.18);}
.page-hero{padding:58px 0 50px; border-bottom:1px solid rgba(130,170,255,.18);}
.hero > .wrap, .page-hero > .wrap{position:relative; z-index:2;}
/* Revontulet: pehmeät liukuvärikerrokset, liike pelkillä transformeilla (näytönohjain, ei uudelleenpiirtoa) */
.sky{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.sky-a{position:absolute; border-radius:50%; will-change:transform; transform:translate3d(0,0,0);}
.sky-a1{width:85%; height:60%; left:-15%; top:-4%; background:radial-gradient(closest-side, rgba(61,123,255,.55), rgba(61,123,255,.18) 55%, transparent); animation:skyDrift1 19s ease-in-out infinite alternate;}
.sky-a2{width:70%; height:48%; right:-18%; top:12%; background:radial-gradient(closest-side, rgba(111,227,255,.42), rgba(111,227,255,.12) 55%, transparent); animation:skyDrift2 23s ease-in-out infinite alternate;}
.sky-a3{width:60%; height:42%; left:22%; top:-16%; background:radial-gradient(closest-side, rgba(138,124,255,.38), rgba(138,124,255,.1) 55%, transparent); animation:skyDrift3 27s ease-in-out infinite alternate;}
@keyframes skyDrift1{from{transform:translate3d(0,0,0) rotate(-8deg) scale(1,.8)} to{transform:translate3d(12%,6%,0) rotate(4deg) scale(1.15,1)}}
@keyframes skyDrift2{from{transform:translate3d(0,0,0) rotate(10deg) scale(1,.85)} to{transform:translate3d(-14%,-4%,0) rotate(-6deg) scale(1.2,1)}}
@keyframes skyDrift3{from{transform:translate3d(0,0,0) rotate(0deg) scale(.9,.8)} to{transform:translate3d(8%,10%,0) rotate(12deg) scale(1.1,1.05)}}
.sky-stars{position:absolute; inset:0; opacity:.75; will-change:opacity; animation:skyTwinkle 4.5s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 22%, #fff, transparent), radial-gradient(1px 1px at 17% 64%, #dbe8ff, transparent),
    radial-gradient(1.4px 1.4px at 26% 12%, #fff, transparent), radial-gradient(1px 1px at 35% 48%, #cfe0ff, transparent),
    radial-gradient(1.2px 1.2px at 44% 78%, #fff, transparent), radial-gradient(1px 1px at 53% 30%, #dbe8ff, transparent),
    radial-gradient(1.5px 1.5px at 62% 9%, #fff, transparent), radial-gradient(1px 1px at 71% 58%, #cfe0ff, transparent),
    radial-gradient(1.2px 1.2px at 80% 26%, #fff, transparent), radial-gradient(1px 1px at 89% 70%, #dbe8ff, transparent),
    radial-gradient(1.3px 1.3px at 94% 14%, #fff, transparent), radial-gradient(1px 1px at 4% 86%, #cfe0ff, transparent),
    radial-gradient(1px 1px at 48% 92%, #fff, transparent), radial-gradient(1.1px 1.1px at 67% 84%, #dbe8ff, transparent);}
@keyframes skyTwinkle{from{opacity:.45} to{opacity:.9}}
@media (prefers-reduced-motion:reduce){ .sky-a, .sky-stars{animation:none;} }
.hero::after, .page-hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:120px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(7,15,31,.55));}
.hero-glow, .page-hero-glow, .hero-grid-bg{display:none;}

.hero h1, .page-hero h1{
  background:linear-gradient(180deg,#FFFFFF 0%, #DCE9FF 55%, #A9C8FF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 24px rgba(61,123,255,.35));
}
.hero h1{font-size:clamp(36px,5vw,58px);}
.hero h1 .accent{background:linear-gradient(90deg,#6FA2FF,#6FE3FF); -webkit-background-clip:text; background-clip:text; color:transparent;}
.badge, .page-kicker{background:rgba(79,140,255,.1); border:1px solid rgba(130,170,255,.28); padding:7px 14px; border-radius:30px; color:#CFE0FF;}
.badge .dot, .page-kicker .dot{background:#6FE3FF; animation:skyPulse 2s infinite;}
@keyframes skyPulse{0%{box-shadow:0 0 0 0 rgba(111,227,255,.6)}70%{box-shadow:0 0 0 9px rgba(111,227,255,0)}100%{box-shadow:0 0 0 0 rgba(111,227,255,0)}}
.page-hero .breadcrumb a{color:#B3C3E2;}
.page-hero .breadcrumb a:hover{color:#fff;}

/* --- Painikkeet --- */
.btn-primary, .btn-small{
  background:linear-gradient(135deg,#4F8CFF 0%,#2F62F5 100%); color:#fff;
  box-shadow:0 8px 24px -8px var(--glow-blue), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s, box-shadow .15s;
}
.btn-primary:hover, .btn-small:hover{background:linear-gradient(135deg,#6AA0FF 0%,#3A6CFF 100%); transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(61,123,255,.7), inset 0 1px 0 rgba(255,255,255,.3);}
.btn-ghost{background:rgba(255,255,255,.03); border-color:rgba(130,170,255,.3); transition:border-color .15s, box-shadow .15s, color .15s;}
.btn-ghost:hover{border-color:#6FA2FF; box-shadow:0 0 0 3px rgba(79,140,255,.15), 0 8px 24px -10px var(--glow-blue);}
.hero .btn-ghost, .page-hero .btn-ghost{color:#fff;}

/* --- Kortit: huurteinen lasi + hehkuva hover --- */
.rank-panel, .side-card, .guide-card, .tool-card, .calc-shell, .price-chart-card, .exchange-card, .author-box, .coin-calc-card, .news-card, .card{
  background:var(--glass), var(--ink-raised); border-color:var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px -18px rgba(0,0,0,.6);
}
.guide-card, .tool-card, .news-card, .exchange-card{transition:transform .2s, box-shadow .2s, border-color .2s;}
.guide-card:hover, .tool-card:hover, .news-card:hover, .exchange-card:hover{
  transform:translateY(-4px); border-color:rgba(111,162,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px -18px var(--glow-blue), 0 0 0 1px rgba(79,140,255,.18);
}
.guide-card::before{height:2px; background:linear-gradient(90deg, var(--gc, #4F8CFF), transparent); box-shadow:0 0 14px var(--gc, #4F8CFF);}
.vivid-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 12px 30px -16px rgba(0,0,0,.6); transition:transform .2s, box-shadow .2s;}
.vivid-card:hover{transform:translateY(-4px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 20px 40px -18px var(--glow-blue);}
.rank-row:hover{background:linear-gradient(90deg, rgba(79,140,255,.14), transparent); box-shadow:inset 2px 0 0 #6FA2FF;}
.price-chart-card{background:radial-gradient(120% 80% at 10% -20%, rgba(79,140,255,.18), transparent 60%), var(--glass), var(--ink-raised);}
.pcc-tab.active{box-shadow:0 0 16px -2px var(--glow-blue);}

/* --- Väliotsikot: liukuväri + revontuliviiva --- */
.article-body h2, .section-head h2{
  background:linear-gradient(180deg, var(--text-hi) 30%, #9CC0FF 140%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.article-body h2::after, .section-head h2::after{content:""; display:block; width:56px; height:3px; border-radius:3px; margin-top:12px;
  background:linear-gradient(90deg,#4F8CFF,#6FE3FF,#8A7CFF); box-shadow:0 0 14px rgba(79,140,255,.6);}
:root[data-theme="light"] .article-body h2, :root[data-theme="light"] .section-head h2{background:none; color:var(--text-hi);}

/* --- Taulukot --- */
.table-scroll{border:1px solid var(--glass-border); border-radius:var(--radius-md); background:var(--glass), var(--ink-raised); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); margin:18px 0;}
.table-scroll .data-table{margin:0 !important;}
.data-table th, .coin-table th{background:linear-gradient(180deg, rgba(79,140,255,.16), rgba(79,140,255,.06)); color:#A9C6FF; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; padding:13px 16px; border-bottom:1px solid rgba(130,170,255,.28);}
.data-table td{padding:13px 16px; transition:background .15s;}
.data-table tr:nth-child(even) td{background:rgba(255,255,255,.018);}
.data-table tr:hover td{background:rgba(79,140,255,.09);}
.data-table tr:hover td:first-child{box-shadow:inset 3px 0 0 #4F8CFF;}
:root[data-theme="light"] .data-table th, :root[data-theme="light"] .coin-table th{color:#2158D6;}
.coin-table tr:hover{background:linear-gradient(90deg, rgba(79,140,255,.1), transparent);}

/* --- Info- ja huomiolaatikot --- */
.info-block{background:var(--glass), var(--ink-raised-2); border-color:var(--glass-border); border-left-color:#6FE3FF;}
.notice-block{box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 26px -18px rgba(0,0,0,.6);}
.notice-icon{box-shadow:0 0 18px -4px currentColor;}

/* --- Ticker, navigaatio, alatunniste --- */
.bottom-ticker{background:linear-gradient(90deg,#08132A,#0C1B3A 50%,#08132A); border-bottom:1px solid rgba(130,170,255,.22); box-shadow:0 1px 18px -6px rgba(61,123,255,.5);}
.bt-item{border-right-color:rgba(130,170,255,.14); color:#C9D8F5;}
header.site-nav{box-shadow:0 1px 0 rgba(130,170,255,.12), 0 10px 30px -20px rgba(0,0,0,.7);}
nav.links a.active{text-shadow:0 0 16px rgba(111,162,255,.8);}
.nav-dropdown{background:var(--glass), var(--ink-raised); border-color:var(--glass-border);}
footer{position:relative;}
footer::before{content:""; position:absolute; top:-1px; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, #4F8CFF, #6FE3FF, #8A7CFF, transparent); box-shadow:0 0 18px rgba(79,140,255,.6);}
.trust-item .n{background:linear-gradient(180deg,#fff,#8DB8FF); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 12px rgba(79,140,255,.45));}
:root[data-theme="light"] .trust-item .n{background:none; color:var(--gold); filter:none;}

/* --- Pehmeä esiinliukuminen vierittäessä --- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.is-in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} .badge .dot, .page-kicker .dot{animation:none;} }

/* Herokortit umpinaisemmiksi, jotta leijuvat kolikot eivät haittaa luettavuutta */
.hero .ccard, .hero .show-more, .hero .byline-card, .hero .rank-panel{background-color:rgba(9,20,42,.9);}
.hero .show-more{border-color:rgba(130,170,255,.28); color:#CFE0FF;}
.hero .show-more:hover{box-shadow:0 0 0 3px rgba(79,140,255,.15); color:#fff;}

/* --- FAQ (details.info-block): Kryptokurssit-tyyliset laatikot sinivalkoisena --- */
.info-block{margin:10px 0; border:1px solid var(--glass-border); border-left:1px solid var(--glass-border); border-radius:var(--radius-md); background:var(--glass), var(--ink-raised); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition:border-color .2s, box-shadow .2s;}
.info-block summary{position:relative; padding:17px 58px 17px 20px; font-family:'Sora',sans-serif; font-size:15.5px; font-weight:600; line-height:1.4; color:var(--text-hi); transition:color .15s;}
.info-block summary::before{content:none;}
.info-block summary::after{content:"+"; position:absolute; right:16px; top:50%; width:28px; height:28px; margin-top:-14px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:17px; font-weight:500; line-height:1; color:#8DB8FF; border:1px solid rgba(130,170,255,.35); background:rgba(79,140,255,.08); transition:transform .25s, background .2s, color .2s, box-shadow .2s;}
.info-block:hover{border-color:rgba(111,162,255,.45);}
.info-block:hover summary{color:#fff;}
.info-block:hover summary::after{box-shadow:0 0 14px -2px var(--glow-blue);}
.info-block[open]{border-color:rgba(111,162,255,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 14px 34px -20px var(--glow-blue);}
.info-block[open] summary::after{content:"\2212"; transform:rotate(180deg); background:linear-gradient(135deg,#4F8CFF,#2F62F5); color:#fff; border-color:transparent; box-shadow:0 0 16px -2px var(--glow-blue);}
.info-block .body{padding:0 20px 18px; font-size:14.5px; color:var(--text-mid); line-height:1.7; animation:faqIn .28s ease;}
.info-block .body p + p{margin-top:10px;}
@keyframes faqIn{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
:root[data-theme="light"] .info-block summary::after{color:#2158D6; border-color:#C9D8F2; background:#F1F6FF;}
:root[data-theme="light"] .info-block[open] summary::after{color:#fff;}
:root[data-theme="light"] .info-block:hover summary{color:var(--gold);}
@media (max-width:560px){ .info-block summary{font-size:14.5px; padding:15px 52px 15px 16px;} .info-block .body{padding:0 16px 16px;} }
@media (prefers-reduced-motion:reduce){ .info-block .body{animation:none;} .info-block summary::after{transition:none;} }

/* --- Päävalikko: sticky + Kryptokurssit-henkinen muotoilu sinivalkoisena --- */
html, body{overflow-x:hidden; overflow-x:clip;} /* clip ei riko position:sticky -toimintoa kuten hidden */
header.site-nav{position:sticky; top:40px; z-index:60; background:rgba(7,15,31,.96); backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid rgba(130,170,255,.18); transition:box-shadow .2s, background .2s;}
header.site-nav.is-scrolled{background:rgba(7,15,31,.94); box-shadow:0 1px 0 rgba(130,170,255,.2), 0 12px 32px -18px rgba(61,123,255,.55);}
:root[data-theme="light"] header.site-nav{background:rgba(255,255,255,.86); border-bottom-color:#DCE6F5;}
:root[data-theme="light"] header.site-nav.is-scrolled{background:rgba(255,255,255,.96); box-shadow:0 10px 30px -18px rgba(11,30,61,.35);}
.nav-inner{padding-top:12px; padding-bottom:12px;}
nav.links{gap:4px;}
nav.links a.top-link{font-family:'Sora',sans-serif; font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--text-mid); padding:9px 13px; border-radius:9px; transition:background .15s, color .15s, box-shadow .15s;}
nav.links a.top-link:hover, nav.links .nav-item:hover > a.top-link{color:var(--text-hi); background:rgba(79,140,255,.1);}
nav.links a.active{color:#8DB8FF; background:rgba(79,140,255,.16); box-shadow:inset 0 -2px 0 #4F8CFF, 0 0 18px -6px var(--glow-blue); text-shadow:none;}
:root[data-theme="light"] nav.links a.active{color:#2158D6;}
.nav-dropdown{border-radius:12px; padding:8px; margin-top:8px;}
.nav-dropdown a{font-size:13px; border-radius:8px;}
.nav-dropdown a:hover{background:rgba(79,140,255,.12); color:#fff; box-shadow:inset 2px 0 0 #4F8CFF;}
:root[data-theme="light"] .nav-dropdown a:hover{color:var(--gold);}
.icon-btn{border-color:rgba(130,170,255,.3); background:rgba(79,140,255,.08); color:#CFE0FF; transition:box-shadow .15s, border-color .15s;}
.icon-btn:hover{border-color:#6FA2FF; box-shadow:0 0 14px -3px var(--glow-blue);}
:root[data-theme="light"] .icon-btn{color:var(--gold);}
.mobile-nav{background:rgba(7,15,31,.97); border-bottom:1px solid rgba(130,170,255,.18); padding:8px 18px 16px;}
:root[data-theme="light"] .mobile-nav{background:#fff;}
.mobile-nav a{font-family:'Sora',sans-serif; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--text-hi); padding:13px 4px; border-bottom:1px solid rgba(130,170,255,.12);}
.mobile-nav a:hover{color:#8DB8FF;}

/* --- Suorituskyky: kalliit efektit vain isoille näytöille --- */
@media (min-width:1081px){
  header.site-nav{background:rgba(7,15,31,.82); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);}
  :root[data-theme="light"] header.site-nav{background:rgba(255,255,255,.86);}
}
@media (max-width:1080px){
  .hero h1, .page-hero h1{filter:none;}
  .trust-item .n{filter:none;}
}