@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
 --bg:#080b10; --panel:#101720; --line:#202b37;
 --text:#f4f7fa; --muted:#96a3b2; --green:#a3ffbf;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,90%);margin:auto}
header{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center}
nav{display:flex;justify-content:space-between;align-items:center;width:100%}
.logo{font-size:25px;font-weight:800;letter-spacing:2px}
.logo span{color:var(--green)}
.links{display:flex;gap:28px;color:var(--muted);font-size:13px}
.links a:hover{color:var(--green)}
.hero{padding:110px 0 95px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;width:450px;height:450px;background:#43ff8730;filter:blur(130px);right:-100px;top:20px;pointer-events:none}
.eyebrow{color:var(--green);font-size:12px;letter-spacing:3px;font-weight:800}
h1{font-size:clamp(42px,7vw,78px);line-height:1.08;letter-spacing:-4px;max-width:850px;margin:25px 0}
h1 span{color:var(--green)}
h2{font-size:clamp(29px,4vw,43px);letter-spacing:-1.5px}
.lead{max-width:600px;color:var(--muted);line-height:1.9;font-size:16px}
.btn{display:inline-flex;padding:15px 23px;background:var(--green);color:#07110b;border-radius:9px;font-weight:800;font-size:13px;margin-top:25px;transition:.2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 35px #a3ffbf35}
section{padding:75px 0}
.section-head{margin-bottom:35px}
.section-head p{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:27px;transition:.25s}
.card:hover{border-color:#a3ffbf80;transform:translateY(-4px)}
.card h3{font-size:19px}
.price{font-size:39px;font-weight:800;margin:22px 0}
.price small{font-size:14px;color:var(--muted)}
.card p,.muted{color:var(--muted);font-size:14px;line-height:1.8}
.tag{display:inline-block;color:var(--green);font-size:10px;letter-spacing:2px;font-weight:800}
.feature-icon{font-size:25px;color:var(--green)}
.faq details{padding:20px 0;border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700}
.faq details p{color:var(--muted);line-height:1.8}
footer{border-top:1px solid var(--line);padding:45px 0;color:var(--muted);font-size:12px}
.footer-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
footer a:hover{color:var(--green)}
.page{padding:65px 0;max-width:850px;min-height:65vh}
.page h1{font-size:42px;letter-spacing:-1px}
.page h2{font-size:22px;margin-top:35px}
.page p,.page li{color:var(--muted);line-height:1.9;font-size:14px}
.notice{border:1px solid #52604b;background:#142019;padding:16px;border-radius:10px;color:#c8e7d0;font-size:13px;line-height:1.8}
@media(max-width:700px){
 .links{gap:12px;font-size:11px}
 .links a:nth-child(2){display:none}
 .hero{padding:75px 0}
 h1{letter-spacing:-2px}
 .grid{grid-template-columns:1fr}
 section{padding:55px 0}
 .footer-grid{flex-direction:column}
}


/* NORTLINK tariff cards */
.tariff-grid {
    align-items: stretch;
}

.tariff-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

.tariff-card .price {
    margin-bottom: 4px;
}

.tariff-details {
    border-top: 1px solid rgba(255,255,255,.10);
    padding-top: 13px;
    margin-top: 2px;
}

.tariff-details summary,
.general-terms summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    color: rgba(255,255,255,.72);
    font-size: 14px;
    transition: color .2s ease;
}

.tariff-details summary::-webkit-details-marker,
.general-terms summary::-webkit-details-marker {
    display: none;
}

.tariff-details summary:hover,
.general-terms summary:hover {
    color: #fff;
}

.tariff-details summary span,
.general-terms summary span {
    color: #8c75ff;
    font-size: 19px;
    transition: transform .25s ease;
}

.tariff-details[open] summary span,
.general-terms[open] summary span {
    transform: rotate(45deg);
}

.tariff-description {
    padding-top: 12px;
    color: rgba(255,255,255,.68);
    font-size: 14px;
    line-height: 1.65;
}

.tariff-description p {
    margin: 0 0 8px;
}

.tariff-description ul {
    margin: 0;
    padding-left: 19px;
}

.tariff-description li {
    margin: 4px 0;
}

.tariff-card .pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    margin-top: auto;
    padding: 13px 20px;
    border: 1px solid rgba(151,125,255,.65);
    border-radius: 12px;
    background: linear-gradient(110deg, #7555e8, #5740bd);
    color: #fff;
    font: inherit;
    font-weight: 650;
    letter-spacing: .2px;
    cursor: pointer;
    box-shadow: 0 5px 22px rgba(105,75,220,.18);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.tariff-card .pay-btn span {
    font-size: 17px;
    transition: transform .2s ease;
}

.tariff-card .pay-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
    box-shadow: 0 8px 30px rgba(125,95,255,.35);
}

.tariff-card .pay-btn:hover span {
    transform: translate(3px, -2px);
}

.tariff-card .pay-btn:active {
    transform: translateY(0);
}

.general-terms {
    margin-top: 24px;
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.general-terms summary {
    color: rgba(255,255,255,.82);
    font-weight: 600;
}

.terms-content {
    padding-top: 14px;
    color: rgba(255,255,255,.65);
    font-size: 14px;
    line-height: 1.65;
}

.terms-content p {
    margin: 7px 0;
}

@media (prefers-reduced-motion: reduce) {
    .tariff-card .pay-btn,
    .tariff-card .pay-btn span,
    .tariff-details summary span,
    .general-terms summary span {
        transition: none;
    }
}

/* Independent tariff card expansion */
.tariff-grid {
    align-items: start !important;
}

.tariff-card {
    align-self: start !important;
    height: fit-content;
}


/* NORTLINK support section */
.support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.support-grid .btn {
    margin-top: 12px;
}
@media(max-width:700px) {
    .support-grid {
        grid-template-columns: 1fr;
    }
}


/* Public documentation links and review code */
.documentation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.document-link { display: flex; flex-direction: column; min-height: 190px; transition: border-color .2s ease, transform .2s ease; }
.document-link:hover { border-color: var(--green); transform: translateY(-3px); }
.document-link p { flex: 1; }
.document-action { display: inline-flex; margin-top: 12px; color: var(--green); font-size: 13px; font-weight: 800; }
.review-code { color: var(--muted); font-size: 11px; margin-top: 12px; }
.review-code b { color: var(--green); letter-spacing: .5px; }
.footer-links a { display: inline-flex; align-items: center; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; }
.footer-links a:hover { border-color: var(--green); }
@media(max-width:700px) { .documentation-grid { grid-template-columns: 1fr; } }