html{
    scroll-behavior: smooth;
}
body{
    font-family: "Raleway", sans-serif;
}

.nav-link{ color:#111827;
    font-weight:400; }
.nav-link:hover{ color:#0D4CFF; }
.btn-primary{
    display:inline-flex;
    align-items:center;
    gap:.75rem;
    padding:.7rem 1rem;
    border-radius:9999px;
    color:#fff;
    font-weight:600;
    background: linear-gradient(135deg,#1D4BFF,#3F7BFF);
    transition:.2s ease;
}
.btn-primary:hover{ filter:brightness(1.05); transform: translateY(-1px); }
.badge{
    display:flex; align-items:center; justify-content:center;
    width:2rem; height:2rem; border-radius:9999px;
    background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
}
.custom-btn {
    border-radius: 100px;
    background: linear-gradient(85deg, #1447E6 0%, #4F79FF 50%, #1447E6 100%);
    box-shadow: 0 4px 0 0 #002C9C, 0 14px 20px 0 rgba(78, 137, 255, 0.20);
    transition: all 0.3s ease;
}

.custom-btn:hover {
    background: linear-gradient(85deg, #0F3BD9 0%, #3C6EFF 50%, #0F3BD9 100%);
    box-shadow: 0 6px 0 0 #001F75, 0 16px 24px 0 rgba(78, 137, 255, 0.35);
    transform: translateY(-2px);
}

.number-btn {
    position: relative;
    border-radius: 140px;
    background: linear-gradient(180deg, #AEC2FF 0%, #1447E6 100%);
    z-index: 1;
}

.number-btn::before {
    content: "";
    position: absolute;
    inset: -2px; /* рамка снаружи */
    border-radius: 148px; /* +8px к радиусу */
    border: 8px solid rgba(104, 137, 243, 0.30);
    z-index: -1;
}

.tag-white{
    display:inline-flex; align-items:center;
    padding:.55rem .9rem; border-radius:1rem;
    background:#fff; color:#111827; font-weight:600;
    box-shadow: 0 12px 22px rgba(0,0,0,.12);
}
.stat{
    border:1px solid rgba(255,255,255,.08);
    background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 40%);
    border-radius:18px; padding:1rem 1rem 1rem 1rem;
}
/* mobile drawer link */
.mobile-link{ display:block;
    padding:.6rem .25rem;
    font-weight:400;
    color:#111827; }
.mobile-link:hover{ color:#0D4CFF; }

.quote{
    font-family: 'Geologica', sans-serif;
}
.inverted-radius {
    --r: 25px;
    --s: 50px;
    background: white;
    border-radius: var(--r);
    --_m:/calc(2*var(--r)) calc(2*var(--r))
    radial-gradient(#000 70%,#0000 72%) no-repeat;
    mask:
            right calc(var(--s) + var(--r)) top 0 var(--_m),
            right calc(var(--s) + var(--r)) var(--_m),
            radial-gradient(var(--s) at 100% 0,#0000 99%,#000 101%)
            calc(-1*var(--r)) var(--r) no-repeat,
            conic-gradient(at calc(100% - var(--s) - 2*var(--r)) calc(var(--s) + 2*var(--r)), #0000 25%,#000 0);
}
.gradient-grey{
    background: var(--123, radial-gradient(54.18% 60.69% at 49.96% 50%, #1D1D1E 0%, rgba(29, 29, 30, 0.78) 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gradient2{
    opacity: 0.7;
    background: radial-gradient(55.3% 55.3% at 36.76% 25.68%, #0F0F0F 0%, rgba(15, 15, 15, 0.90) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.blue-bg{
    background: linear-gradient(100deg, #002599 8.58%, #113ABC 45.12%, #002599 91.28%);
}
.card-bg{
    border-radius: 24px;
    border: 0.5px solid #E6E6E6;
    background: linear-gradient(99deg, rgba(255, 255, 255, 0.82) 8.47%, rgba(255, 255, 255, 0.94) 48.51%, rgba(255, 255, 255, 0.87) 94.24%);
    backdrop-filter: blur(30.780000686645508px);
}
.bento-block{
   background-image: url("img/bento-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.bg1{
    background-image: url("img/bg1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.number {
    position: relative;
    border-radius: 140px;
    background: linear-gradient(180deg, #AEC2FF 0%, #1447E6 100%);
    z-index: 1;
}

.number::before {
    content: "";
    position: absolute;
    inset: -8px; /* рамка снаружи */
    border-radius: 148px; /* +8px к радиусу */
    border: 8px solid rgba(104, 137, 243, 0.30);
    z-index: -1;
}

.number2{
    color: #252525;
    position: relative;           /* 1) anchor the pseudo */
    display: inline-block;        /* optional, helps for shrink-wrapped boxes */
    border-radius: 10px;
    background: linear-gradient(85deg, #EEEFF3 0%, #CACACD 50%, #EEEFF3 100%);
    box-shadow: 0 12px 17.143px rgba(195,195,195,.20);
    z-index: 0;                   /* create stacking context without hiding */
    overflow: visible;            /* make sure the ring can extend outside */
}

.number2::before{
    content: "";
    position: absolute;
    inset: -2px;                  /* outer ring */
    border-radius: 12px;          /* 10px + 8px */
    border: 2px solid rgba(255,255,255,.30);
    pointer-events: none;
    z-index: -1;                  /* or 0; with z-index:0 on parent it still shows */
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 0.75rem;       /* py-2 px-3 */
    border-radius: 0.75rem;        /* rounded-xl */
    font-size: 0.8rem;           /* text-sm */
    font-weight: 500;              /* font-medium */
    color: #1f2937;                /* text-neutral-800 */
    background-color: rgba(255, 255, 255, 0.9); /* bg-white/90 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06);  /* shadow */
}
.card-text{
    font-family: 'Geologica', sans-serif;
}
@media (max-width: 1023px) {
    section > div[style] {
        background-size: 60% !important;   /* зменшуємо фон */
        background-position: center bottom !important; /* вирівнюємо по центру */
    }
}


.number-badge{
    color: #1447E6;
    leading-trim: both;
    text-edge: cap;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 21.6px */
    letter-spacing: -0.36px;
}

.action-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    background: #111827; /* neutral-900 */
    color: #fff;
    font-size: 14px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    will-change: transform, background-color;
}

details[open] summary .action-square {
    transform: rotate(45deg);
    background: #1d4bff; /* синій з твоєї теми */
}

summary::-webkit-details-marker {
    display: none;
}

/* Стиль для плавного розкриття */
details .faq-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.2s ease, opacity 0.2s ease;
}

details[open] .faq-content {
    opacity: 1;
    max-height: 500px; /* достатньо велике значення */
}

@media (min-width:1024px){ .only-mobile { display:none !important; } }