/* ==========================================================
   AI-Powered Capstone Project Repository System
   Landing Page Stylesheet — Premium Dark Futuristic Edition
   File: static/css/landing/style.css
========================================================== */

/* ==========================================================
   CSS VARIABLES
========================================================== */

:root{

    --primary:#3E7BFA;
    --primary-dark:#1E40C4;
    --primary-light:rgba(62,123,250,.14);

    --cyan:#22D3EE;
    --violet:#8B5CF6;

    --secondary:#B7BEDE;

    --background:#050816;
    --surface:#0B1024;
    --surface-hi:#10162E;

    --gray-50:#F4F6FF;
    --gray-100:#E7EAFB;
    --gray-200:rgba(148,163,255,.16);
    --gray-300:rgba(148,163,255,.24);
    --gray-400:#767EA3;
    --gray-500:#8890B5;
    --gray-600:#B7BEDE;
    --gray-700:#D6DAF3;
    --gray-800:#EDEFFC;
    --gray-900:#F7F8FF;

    --success:#22D3EE;
    --warning:#F59E0B;
    --danger:#F87171;

    --line:rgba(148,163,255,.14);
    --line-hi:rgba(148,163,255,.32);

    --shadow-sm:
        0 2px 10px rgba(2,4,14,.35);

    --shadow-md:
        0 10px 30px rgba(2,4,14,.45);

    --shadow-lg:
        0 22px 55px rgba(2,4,14,.55);

    --shadow-xl:
        0 35px 90px rgba(2,4,14,.65);

    --glow-primary:
        0 0 45px rgba(62,123,250,.30);

    --glow-cyan:
        0 0 45px rgba(34,211,238,.25);

    --radius-sm:14px;
    --radius:22px;
    --radius-lg:28px;
    --radius-xl:34px;

    --transition:.35s cubic-bezier(.16,.8,.24,1);

    --max-width:1280px;

    --font-display:'Inter',sans-serif;

}

/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;
    background:var(--background);
    color:var(--gray-600);
    line-height:1.7;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;

}

img{

    display:block;
    max-width:100%;

}

a{

    text-decoration:none;
    color:inherit;

}

button,
input,
select{

    font:inherit;
    outline:none;
    border:none;

}

ul{

    list-style:none;

}

::selection{

    background:rgba(62,123,250,.35);
    color:#fff;

}

/* ==========================================================
   CONTAINER
========================================================== */

.container{

    width:min(100% - 40px,var(--max-width));
    margin:auto;

}

/* ==========================================================
   BACKGROUND
========================================================== */

.background-grid{

    position:fixed;
    inset:0;

    background-image:

    linear-gradient(
        rgba(148,163,255,.06) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(148,163,255,.06) 1px,
        transparent 1px
    );

    background-size:48px 48px;

    -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 15%,#000,transparent 75%);
    mask-image:radial-gradient(ellipse 70% 55% at 50% 15%,#000,transparent 75%);

    pointer-events:none;
    z-index:-3;

}

body::before{

    content:"";

    position:fixed;
    inset:0;

    z-index:-4;

    background:
        radial-gradient(ellipse 900px 700px at 10% -5%,rgba(62,123,250,.10),transparent 60%),
        radial-gradient(ellipse 900px 800px at 92% 8%,rgba(139,92,246,.08),transparent 60%),
        radial-gradient(ellipse 1100px 900px at 50% 120%,rgba(34,211,238,.05),transparent 60%);

    pointer-events:none;

}

.background-blur{

    position:fixed;
    width:460px;
    height:460px;
    border-radius:50%;
    filter:blur(120px);
    z-index:-2;

}

.blur-one{

    background:rgba(62,123,250,.35);

    top:-100px;
    left:-120px;

}

.blur-two{

    background:rgba(139,92,246,.28);

    bottom:-150px;
    right:-120px;

}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

.section-heading{

    text-align:center;
    margin-bottom:70px;

}

.section-tag{

    display:inline-flex;
    align-items:center;

    gap:8px;

    padding:8px 18px 8px 12px;

    background:var(--primary-light);

    color:var(--cyan);

    border:1px solid rgba(62,123,250,.28);

    border-radius:999px;

    font-size:.8rem;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;

    margin-bottom:22px;

}

.section-tag::before{

    content:"";

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:0 0 8px var(--cyan),0 0 0 4px rgba(34,211,238,.15);

}

.section-heading h2{

    font-size:clamp(2rem,4vw,3.2rem);

    line-height:1.15;
    font-weight:700;
    letter-spacing:-.02em;

    color:var(--gray-900);

    margin-bottom:20px;

}

.section-heading p{

    max-width:760px;

    margin:auto;

    color:var(--gray-500);

    font-size:1.08rem;

}

/* ==========================================================
   BUTTONS
========================================================== */

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border-radius:999px;

    cursor:pointer;

    font-weight:700;

    transition:var(--transition);

    position:relative;

}

.btn:active{

    transform:scale(.97);

}

.btn-primary{

    background:linear-gradient(
        135deg,
        var(--cyan),
        var(--primary)
    );

    color:#04070F;

    box-shadow:var(--shadow-md),0 0 26px rgba(62,123,250,.35);

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-lg),0 0 40px rgba(62,123,250,.5);

}

.btn-outline{

    border:1px solid var(--gray-200);

    color:var(--gray-800);

    background:rgba(148,163,255,.05);

}

.btn-outline:hover{

    border-color:var(--primary);

    color:var(--cyan);

    background:rgba(148,163,255,.09);

}

.btn-secondary{

    background:rgba(148,163,255,.05);

    border:1px solid var(--gray-200);

    color:var(--gray-800);

}

.btn-secondary:hover{

    border-color:var(--primary);

    color:var(--cyan);

    transform:translateY(-3px);

}

.btn-large{

    padding:17px 36px;
    font-size:1rem;

}

/* ==========================================================
   HEADER
========================================================== */

.header{

    position:sticky;

    top:0;

    z-index:1000;

    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);

    background:
        rgba(5,8,22,.65);

    border-bottom:
        1px solid transparent;

    transition:var(--transition);

}

.header.scrolled{

    border-color:var(--line-hi);

    box-shadow:var(--shadow-sm);

    background:rgba(5,8,22,.85);

}

.navbar{

    height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:flex;

    align-items:center;

    gap:16px;

    flex-shrink:0;

}

.logo-image{

    width:56px;
    height:56px;

    border-radius:50%;

    overflow:hidden;

    background:var(--surface);

    border:1px solid var(--line);

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:var(--shadow-sm),0 0 0 1px rgba(62,123,250,.15) inset;

}

.logo-image img{

    width:100%;
    height:100%;
    object-fit:cover;

}

.logo-text{

    display:flex;
    flex-direction:column;

}

.system-title{

    font-weight:800;
    font-size:1rem;

    color:var(--gray-900);

}

.system-subtitle{

    font-size:.8rem;

    color:var(--gray-400);

}

/* ==========================================================
   NAVIGATION
========================================================== */

.nav-menu{

    display:flex;

    align-items:center;

    gap:34px;

    margin-left:auto;

}

.nav-menu a{

    position:relative;

    font-weight:600;

    color:var(--gray-600);

    transition:var(--transition);

}

.nav-menu a:hover{

    color:var(--cyan);

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    background:linear-gradient(90deg,var(--primary),var(--cyan));

    box-shadow:0 0 8px rgba(34,211,238,.6);

    transition:var(--transition);

}

.nav-menu a:hover::after{

    width:100%;

}

/* ==========================================================
   NAV ACTIONS
========================================================== */

.nav-actions{

    display:flex;

    align-items:center;

    gap:14px;

}

/* ==========================================================
   MOBILE MENU
========================================================== */

.mobile-toggle{

    display:none;

    width:48px;
    height:48px;

    border-radius:12px;

    background:var(--surface);

    border:1px solid var(--line);

    cursor:pointer;

    position:relative;

}

.mobile-toggle span{

    position:absolute;

    left:11px;

    width:24px;

    height:2px;

    background:var(--gray-800);

    transition:var(--transition);

}

.mobile-toggle span:nth-child(1){

    top:15px;

}

.mobile-toggle span:nth-child(2){

    top:23px;

}

.mobile-toggle span:nth-child(3){

    top:31px;

}

.mobile-toggle.active span:nth-child(1){

    transform:
        rotate(45deg);

    top:23px;

}

.mobile-toggle.active span:nth-child(2){

    opacity:0;

}

.mobile-toggle.active span:nth-child(3){

    transform:
        rotate(-45deg);

    top:23px;

}

.mobile-menu{

    display:none;

    flex-direction:column;

    gap:18px;

    padding:25px;

    background:rgba(11,16,36,.92);
    backdrop-filter:blur(20px);

    border:1px solid var(--line);

    border-radius:20px;

    margin-bottom:20px;

    box-shadow:var(--shadow-lg);

}

.mobile-menu.active{

    display:flex;

}

.mobile-menu a{

    font-weight:600;

    color:var(--gray-600);

}

.mobile-buttons{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-top:12px;

}
/* ==========================================================
   HERO SECTION
========================================================== */

.hero{

    position:relative;

    padding:130px 0 100px;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    top:-140px;
    right:-140px;

    width:480px;
    height:480px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(62,123,250,.22),
            transparent 72%
        );

    filter:blur(20px);

    pointer-events:none;

    animation:orbPulse 8s ease-in-out infinite;

}

.hero-grid{

    display:grid;

    grid-template-columns:
        minmax(0,1.1fr)
        minmax(420px,.9fr);

    align-items:center;

    gap:70px;

}

/* ==========================================================
   HERO CONTENT
========================================================== */

.hero-content{

    position:relative;
    z-index:2;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    background:rgba(11,16,36,.7);

    color:var(--cyan);

    border:1px solid rgba(62,123,250,.28);

    border-radius:999px;

    font-size:.88rem;

    font-weight:700;

    box-shadow:var(--shadow-sm);

    margin-bottom:28px;

    backdrop-filter:blur(10px);

}

.hero-badge::before{

    content:"";

    width:10px;
    height:10px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 10px var(--cyan),
        0 0 0 5px rgba(34,211,238,.14);

}

.hero-content h1{

    font-size:clamp(2.5rem,4.6vw,4rem);

    line-height:1.12;

    font-weight:800;

    color:var(--gray-900);

    letter-spacing:-1.2px;

    margin-bottom:28px;

}

.hero-content h1 span{

    display:block;

    background:linear-gradient(100deg,#5B8DFF,var(--cyan) 55%,var(--violet));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    background-size:200% auto;

    animation:sheen 7s ease-in-out infinite;

}

.hero-description{

    max-width:670px;

    font-size:1.1rem;

    color:var(--gray-500);

    margin-bottom:38px;

}

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:42px;

}

.hero-highlights{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.highlight-item{

    display:flex;

    align-items:center;

    gap:12px;

    background:rgba(148,163,255,.05);

    border:1px solid var(--line);

    border-radius:999px;

    padding:12px 18px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    backdrop-filter:blur(10px);

}

.highlight-item:hover{

    transform:translateY(-4px);

    border-color:rgba(62,123,250,.3);

    box-shadow:var(--shadow-md);

}

.highlight-icon{

    width:28px;
    height:28px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(34,211,238,.14);

    color:var(--cyan);

    font-size:.92rem;

    font-weight:700;

    box-shadow:0 0 12px rgba(34,211,238,.25);

}

.highlight-item span{

    font-size:.93rem;

    font-weight:600;

    color:var(--gray-700);

}

/* ==========================================================
   HERO VISUAL
========================================================== */

.hero-visual{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-visual::before{

    content:"";

    position:absolute;

    inset:20px;

    border-radius:32px;

    background:
        linear-gradient(
            135deg,
            rgba(62,123,250,.20),
            rgba(139,92,246,.08)
        );

    filter:blur(35px);

    z-index:-1;

}

.dashboard-card{

    width:100%;

    max-width:520px;

    background:linear-gradient(160deg,rgba(148,163,255,.06),rgba(148,163,255,.02));

    border-radius:28px;

    border:1px solid var(--line);

    overflow:hidden;

    box-shadow:var(--shadow-xl),var(--glow-primary);

    backdrop-filter:blur(18px);

    animation:
        floatCard 5s ease-in-out infinite;

}

.dashboard-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 24px;

    border-bottom:1px solid var(--line);

    background:
        linear-gradient(
            to bottom,
            rgba(148,163,255,.05),
            transparent
        );

}

.dashboard-dots{

    display:flex;

    gap:8px;

}

.dashboard-dots span{

    width:11px;
    height:11px;

    border-radius:50%;

}

.dashboard-dots span:nth-child(1){

    background:#F87171;

}

.dashboard-dots span:nth-child(2){

    background:#F59E0B;

}

.dashboard-dots span:nth-child(3){

    background:#22D3EE;

}

.dashboard-title{

    font-weight:700;

    color:var(--gray-700);

    font-size:.95rem;

}

.dashboard-body{

    padding:28px;

}

.dashboard-stat{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-bottom:24px;

}

.stat-label{

    color:var(--gray-500);

    font-weight:600;

}

.stat-number{

    font-size:2.3rem;

    font-weight:800;

    background:linear-gradient(120deg,var(--gray-900),var(--cyan));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;

}

/* ==========================================================
   CHART
========================================================== */

.dashboard-chart{

    height:180px;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:14px;

    margin-bottom:34px;

}

.bar{

    flex:1;

    border-radius:14px 14px 0 0;

    background:
        linear-gradient(
            to top,
            var(--primary-dark),
            var(--cyan)
        );

    box-shadow:0 0 18px rgba(62,123,250,.25);

    animation:
        growBars 1.2s ease;

}

.bar-1{height:48%;}
.bar-2{height:78%;}
.bar-3{height:60%;}
.bar-4{height:92%;}
.bar-5{height:70%;}

/* ==========================================================
   DASHBOARD LIST
========================================================== */

.dashboard-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.dashboard-row{

    display:flex;

    align-items:center;

    gap:16px;

}

.dashboard-row span{

    width:54px;
    height:54px;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            rgba(62,123,250,.18),
            rgba(34,211,238,.22)
        );

}

.dashboard-row div{

    flex:1;

    height:16px;

    border-radius:999px;

    background:
        linear-gradient(
            to right,
            rgba(148,163,255,.16),
            rgba(148,163,255,.06)
        );

}

/* ==========================================================
   HERO DECORATION
========================================================== */

.hero::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-80px;

    transform:translateX(-50%);

    width:85%;

    height:2px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(62,123,250,.28),
            transparent
        );

}
/* ==========================================================
   STATISTICS SECTION
========================================================== */

.statistics{

    position:relative;

    padding:110px 0;

}

.statistics-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:28px;

}

.stat-card{

    position:relative;

    background:linear-gradient(160deg,rgba(148,163,255,.045),rgba(148,163,255,.015));

    border:1px solid var(--line);

    border-radius:24px;

    padding:38px 28px;

    text-align:center;

    overflow:hidden;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

    backdrop-filter:blur(16px);

}

.stat-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--cyan)
        );

    transform:scaleX(0);

    transform-origin:left;

    transition:var(--transition);

}

.stat-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg),var(--glow-primary);

    border-color:rgba(62,123,250,.30);

}

.stat-card:hover::before{

    transform:scaleX(1);

}

.stat-icon{

    width:72px;
    height:72px;

    margin:0 auto 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            rgba(62,123,250,.14),
            rgba(34,211,238,.18)
        );

    border:1px solid rgba(62,123,250,.2);

}

.stat-card h3{

    font-size:2.6rem;

    font-weight:800;

    background:linear-gradient(120deg,var(--gray-900),var(--primary));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;

    margin-bottom:10px;

    line-height:1;

}

.stat-card p{

    color:var(--gray-500);

    font-weight:600;

    font-size:1rem;

}

/* ==========================================================
   FEATURES SECTION
========================================================== */

.features{

    position:relative;

    padding:110px 0;

}

.features-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:30px;

}

.feature-card{

    position:relative;

    background:linear-gradient(160deg,rgba(148,163,255,.045),rgba(148,163,255,.015));

    border:1px solid var(--line);

    border-radius:28px;

    padding:38px;

    overflow:hidden;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

    backdrop-filter:blur(16px);

}

.feature-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:linear-gradient(160deg,rgba(148,163,255,.35),transparent 40%,transparent 60%,rgba(34,211,238,.18));

    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;

    opacity:0;

    transition:var(--transition);

    pointer-events:none;

}

.feature-card:hover{

    transform:translateY(-10px);

    border-color:rgba(62,123,250,.24);

    box-shadow:var(--shadow-lg),var(--glow-primary);

}

.feature-card:hover::before{

    opacity:.7;

}

.feature-icon{

    width:76px;
    height:76px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    border-radius:22px;

    margin-bottom:26px;

    background:
        linear-gradient(
            135deg,
            var(--primary-light),
            rgba(34,211,238,.16)
        );

    border:1px solid rgba(62,123,250,.2);

    transition:var(--transition);

}

.feature-card:hover .feature-icon{

    transform:rotate(-8deg) scale(1.08);

    box-shadow:0 0 24px rgba(62,123,250,.35);

}

.feature-card h3{

    font-size:1.45rem;

    font-weight:700;

    color:var(--gray-900);

    margin-bottom:18px;

    line-height:1.3;

}

.feature-card p{

    color:var(--gray-500);

    font-size:1rem;

    line-height:1.8;

}

/* ==========================================================
   FEATURE CARD DECORATION
========================================================== */

.feature-card::after{

    content:"";

    position:absolute;

    right:-60px;
    bottom:-60px;

    width:150px;
    height:150px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(62,123,250,.14),
            transparent 70%
        );

    transition:var(--transition);

}

.feature-card:hover::after{

    transform:scale(1.15);

}

/* ==========================================================
   SECTION DIVIDERS
========================================================== */

.statistics::after,
.features::after{

    content:"";

    display:block;

    width:160px;

    height:4px;

    margin:90px auto 0;

    border-radius:999px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(62,123,250,.35),
            transparent
        );

}
/* ==========================================================
   AI TECHNOLOGY SECTION
========================================================== */

.technology{

    position:relative;

    padding:110px 0;

}

.technology-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:60px;

    align-items:center;

}

.technology-content{

    display:flex;

    flex-direction:column;

    gap:26px;

}

.technology-item{

    position:relative;

    background:linear-gradient(160deg,rgba(148,163,255,.045),rgba(148,163,255,.015));

    border:1px solid var(--line);

    border-left:3px solid var(--primary);

    border-radius:22px;

    padding:30px;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

    backdrop-filter:blur(14px);

}

.technology-item:hover{

    transform:translateX(10px);

    box-shadow:var(--shadow-lg);

    border-color:rgba(62,123,250,.24);

    border-left-color:var(--cyan);

}

.technology-item h3{

    font-size:1.35rem;

    color:var(--gray-900);

    margin-bottom:14px;

    font-weight:700;

}

.technology-item p{

    color:var(--gray-500);

    line-height:1.8;

}

.technology-visual{

    display:flex;

    justify-content:center;

    align-items:center;

}

.ai-card{

    width:100%;

    max-width:470px;

    background:linear-gradient(160deg,rgba(148,163,255,.06),rgba(148,163,255,.02));

    border:1px solid var(--line);

    border-radius:30px;

    overflow:hidden;

    box-shadow:var(--shadow-xl);

    backdrop-filter:blur(18px);

}

.ai-header{

    padding:24px;

    border-bottom:1px solid var(--line);

    background:linear-gradient(
        180deg,
        rgba(148,163,255,.05),
        transparent
    );

}

.ai-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 18px;

    border-radius:999px;

    background:var(--primary-light);

    color:var(--cyan);

    border:1px solid rgba(62,123,250,.28);

    font-size:.9rem;

    font-weight:700;

}

.ai-flow{

    padding:34px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

}

.flow-box{

    width:100%;

    padding:16px 20px;

    text-align:center;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        rgba(62,123,250,.10),
        rgba(34,211,238,.14)
    );

    color:var(--gray-900);

    font-weight:700;

    border:1px solid rgba(62,123,250,.2);

    transition:var(--transition);

}

.flow-box:hover{

    transform:scale(1.03);

    background:linear-gradient(
        135deg,
        rgba(62,123,250,.18),
        rgba(34,211,238,.24)
    );

    box-shadow:0 0 20px rgba(62,123,250,.3);

}

.flow-arrow{

    color:var(--cyan);

    font-size:1.6rem;

    font-weight:700;

    line-height:1;

}

.flow-result{

    width:100%;

    padding:18px;

    text-align:center;

    border-radius:18px;

    color:#04070F;

    font-weight:700;

    background:linear-gradient(
        135deg,
        var(--cyan),
        var(--primary)
    );

    box-shadow:var(--shadow-md),0 0 30px rgba(62,123,250,.35);

}

/* ==========================================================
   WORKFLOW SECTION
========================================================== */

.workflow{

    position:relative;

    padding:110px 0;

}

.workflow-timeline{

    display:flex;

    align-items:flex-start;

    justify-content:flex-start;

    gap:18px;

    overflow-x:auto;

    padding:10px 5px 20px;

    scrollbar-width:thin;

}

.workflow-timeline::-webkit-scrollbar{

    height:8px;

}

.workflow-timeline::-webkit-scrollbar-thumb{

    background:rgba(148,163,255,.25);

    border-radius:999px;

}

.workflow-step{

    flex:0 0 250px;

    position:relative;

    background:linear-gradient(160deg,rgba(148,163,255,.045),rgba(148,163,255,.015));

    border:1px solid var(--line);

    border-radius:24px;

    padding:32px 24px;

    text-align:center;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

    min-height:280px;

    backdrop-filter:blur(14px);

}

.workflow-step:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg),var(--glow-primary);

    border-color:rgba(62,123,250,.28);

}

.workflow-number{

    width:64px;
    height:64px;

    margin:0 auto 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    font-weight:800;

    font-size:1.2rem;

    box-shadow:var(--shadow-md),0 0 22px rgba(62,123,250,.4);

}

.workflow-step h3{

    font-size:1.15rem;

    color:var(--gray-900);

    margin-bottom:16px;

    line-height:1.4;

}

.workflow-step p{

    color:var(--gray-500);

    font-size:.96rem;

    line-height:1.75;

}

.workflow-arrow{

    flex:0 0 auto;

    align-self:center;

    font-size:2rem;

    color:var(--cyan);

    font-weight:700;

    padding-top:20px;

}

.workflow-final{

    border:1px solid rgba(34,211,238,.4);

    background:linear-gradient(
        180deg,
        rgba(34,211,238,.06),
        rgba(148,163,255,.02)
    );

    box-shadow:var(--shadow-sm),0 0 30px rgba(34,211,238,.12);

}

.workflow-final .workflow-number{

    background:linear-gradient(
        135deg,
        var(--cyan),
        #0EA5B8
    );

    box-shadow:var(--shadow-md),0 0 22px rgba(34,211,238,.45);

}

/* ==========================================================
   SECTION DIVIDERS
========================================================== */

.technology::after,
.workflow::after{

    content:"";

    display:block;

    width:160px;

    height:4px;

    margin:90px auto 0;

    border-radius:999px;

    background:linear-gradient(
        to right,
        transparent,
        rgba(62,123,250,.35),
        transparent
    );

}
/* ==========================================================
   REPOSITORY SEARCH SECTION
========================================================== */

.repository-search{

    position:relative;

    padding:110px 0;

}

.search-card{

    max-width:1100px;

    margin:0 auto;

    background:linear-gradient(160deg,rgba(148,163,255,.06),rgba(148,163,255,.02));

    border:1px solid var(--line);

    border-radius:30px;

    padding:40px;

    box-shadow:var(--shadow-lg);

    backdrop-filter:blur(18px);

}

.search-form{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:24px;

    align-items:end;

}

.search-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.search-group label{

    font-weight:700;

    color:var(--gray-700);

    font-size:.95rem;

}

.search-group input,
.search-group select{

    width:100%;

    height:56px;

    padding:0 18px;

    border:1px solid var(--gray-200);

    border-radius:14px;

    background:rgba(148,163,255,.04);

    color:var(--gray-800);

    transition:var(--transition);

}

.search-group select option{

    background:var(--surface);
    color:var(--gray-800);

}

.search-group input::placeholder{

    color:var(--gray-400);

}

.search-group input:focus,
.search-group select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(62,123,250,.16);

    background:rgba(148,163,255,.07);

}

.btn-search{

    width:100%;

    height:56px;

    padding:0 22px;

}

/* ==========================================================
   BENEFITS SECTION
========================================================== */

.benefits{

    position:relative;

    padding:110px 0;

}

.benefits-grid{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:30px;

}

.benefit-card{

    position:relative;

    background:linear-gradient(160deg,rgba(148,163,255,.045),rgba(148,163,255,.015));

    border:1px solid var(--line);

    border-radius:28px;

    padding:36px;

    overflow:hidden;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

    backdrop-filter:blur(16px);

}

.benefit-card:hover{

    transform:translateY(-8px);

    border-color:rgba(62,123,250,.24);

    box-shadow:var(--shadow-lg),var(--glow-primary);

}

.benefit-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:4px;

    height:100%;

    background:linear-gradient(
        to bottom,
        var(--primary),
        var(--cyan)
    );

}

.benefit-icon{

    width:72px;
    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:linear-gradient(
        135deg,
        rgba(62,123,250,.14),
        rgba(34,211,238,.18)
    );

    border:1px solid rgba(62,123,250,.2);

    font-size:2rem;

    margin-bottom:24px;

}

.benefit-card h3{

    font-size:1.4rem;

    font-weight:700;

    color:var(--gray-900);

    margin-bottom:16px;

}

.benefit-card p{

    color:var(--gray-500);

    line-height:1.8;

}

/* ==========================================================
   CTA SECTION
========================================================== */

.cta{

    position:relative;
    isolation:isolate;
    overflow:hidden;

    padding:110px 0;

    /* MATCHES THE WORKFLOW SECTION PALETTE */
    background:
        radial-gradient(circle at 78% 22%, rgba(0, 153, 255, .16), transparent 27%),
        radial-gradient(circle at 15% 82%, rgba(91, 65, 235, .12), transparent 32%),
        linear-gradient(135deg, #06142c 0%, #071b3b 48%, #07162f 100%);

}

.cta-card{

    position:relative;

    overflow:hidden;

    background:
        radial-gradient(ellipse 700px 400px at 15% -20%,rgba(62,123,250,.35),transparent 60%),
        radial-gradient(ellipse 600px 400px at 100% 120%,rgba(139,92,246,.28),transparent 60%),
        linear-gradient(160deg,rgba(148,163,255,.07),rgba(6,20,44,.92));

    border:1px solid var(--line-hi);

    border-radius:34px;

    padding:70px 60px;

    text-align:center;

    color:#fff;

    box-shadow:var(--shadow-xl);

}

.cta .section-tag{

    background:rgba(255,255,255,.1);

    color:#fff;

    border-color:rgba(255,255,255,.2);

}

.cta .section-tag::before{

    background:#fff;
    box-shadow:0 0 8px #fff;

}

.cta h2{

    font-size:clamp(2rem,4vw,3rem);

    font-weight:700;

    margin:24px 0;

    position:relative;

    z-index:1;

    color:var(--gray-900);

}

.cta p{

    max-width:760px;

    margin:0 auto;

    color:var(--gray-500);

    font-size:1.08rem;

    line-height:1.8;

    position:relative;

    z-index:1;

}

.cta-buttons{

    margin-top:40px;

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    position:relative;

    z-index:1;

}

.cta .btn-secondary{

    background:transparent;

    border:1px solid rgba(255,255,255,.3);

    color:#fff;

}

.cta .btn-secondary:hover{

    background:rgba(255,255,255,.1);

    border-color:#fff;

    color:#fff;

}

/* ==========================================================
   FOOTER SECTION
========================================================== */

.footer{

    background:#030510;

    color:#fff;

    padding:80px 0 30px;

    border-top:1px solid var(--line);

}

.footer-grid{

    display:grid;

    grid-template-columns:
        1.6fr
        1fr
        1fr
        1.2fr;

    gap:45px;

    padding-bottom:50px;

    border-bottom:1px solid rgba(148,163,255,.12);

}

.footer-logo{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:22px;

}

.footer-logo img{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#fff;

}

.footer-logo h3{

    font-size:1.1rem;

    color:#fff;

}

.footer-logo p{

    color:rgba(255,255,255,.5);

    font-size:.85rem;

}

.footer-description{

    color:rgba(255,255,255,.55);

    line-height:1.8;

    max-width:420px;

}

.footer-column{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-column h4{

    color:#fff;

    font-size:1.1rem;

    margin-bottom:12px;

}

.footer-column a{

    color:rgba(255,255,255,.55);

    transition:var(--transition);

}

.footer-column a:hover{

    color:var(--cyan);

    transform:translateX(5px);

}

.footer-column p{

    color:rgba(255,255,255,.55);

    line-height:1.7;

}

.footer-bottom{

    text-align:center;

    padding-top:30px;

}

.footer-bottom p{

    color:rgba(255,255,255,.4);

    font-size:.9rem;

}


/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes floatCard{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}


@keyframes growBars{

    from{

        height:0;

    }

}

@keyframes orbPulse{

    0%,
    100%{

        transform:scale(1);
        opacity:.85;

    }

    50%{

        transform:scale(1.08);
        opacity:1;

    }

}

@keyframes sheen{

    0%,
    100%{

        background-position:0% center;

    }

    50%{

        background-position:100% center;

    }

}


/* ==========================================================
   RESPONSIVE DESIGN
========================================================== */


/* Large Tablet */

@media(max-width:1200px){


    .nav-menu{

        display:none;

    }


    .mobile-toggle{

        display:block;

    }


    .hero-grid{

        grid-template-columns:1fr;

        gap:60px;

        text-align:center;

    }


    .hero-description{

        margin-left:auto;

        margin-right:auto;

    }


    .hero-buttons,
    .hero-highlights{

        justify-content:center;

    }


    .hero-visual{

        order:-1;

    }


    .statistics-grid{

        grid-template-columns:
            repeat(2,1fr);

    }


    .features-grid{

        grid-template-columns:
            repeat(2,1fr);

    }


    .technology-grid{

        grid-template-columns:1fr;

    }


    .technology-visual{

        order:-1;

    }


    .search-form{

        grid-template-columns:
            repeat(2,1fr);

    }


    .footer-grid{

        grid-template-columns:
            repeat(2,1fr);

    }


}



/* Tablet */

@media(max-width:768px){


    .container{

        width:min(100% - 28px,var(--max-width));

    }


    .navbar{

        height:74px;

    }


    .logo-image{

        width:46px;

        height:46px;

    }


    .system-title{

        font-size:.9rem;

    }


    .system-subtitle{

        display:none;

    }


    .nav-actions{

        display:none;

    }


    .hero{

        padding:80px 0 70px;

    }


    .hero-content h1{

        font-size:2.5rem;

    }


    .hero-description{

        font-size:1rem;

    }


    .hero-buttons{

        flex-direction:column;

        width:100%;

    }


    .hero-buttons .btn{

        width:100%;

    }


    .hero-highlights{

        flex-direction:column;

        align-items:center;

    }


    .highlight-item{

        width:100%;

        justify-content:center;

    }


    .dashboard-body{

        padding:22px;

    }


    .statistics,
    .features,
    .technology,
    .workflow,
    .repository-search,
    .benefits,
    .cta{

        padding:80px 0;

    }


    .statistics-grid,
    .features-grid,
    .benefits-grid{

        grid-template-columns:1fr;

    }


    .section-heading{

        margin-bottom:45px;

    }


    .section-heading h2{

        font-size:2rem;

    }


    .technology-item{

        padding:24px;

    }


    .workflow-timeline{

        padding-bottom:30px;

    }


    .workflow-step{

        flex-basis:280px;

    }


    .search-card{

        padding:24px;

    }


    .search-form{

        grid-template-columns:1fr;

    }


    .cta-card{

        padding:50px 24px;

    }


    .cta-buttons{

        flex-direction:column;

    }


    .cta-buttons .btn{

        width:100%;

    }


    .footer-grid{

        grid-template-columns:1fr;

    }


}


/* Small Mobile */

@media(max-width:480px){


    .hero-content h1{

        font-size:2.15rem;

        letter-spacing:-.8px;

    }


    .hero-badge{

        font-size:.78rem;

        padding:8px 14px;

    }


    .dashboard-chart{

        height:130px;

        gap:8px;

    }


    .stat-card{

        padding:30px 20px;

    }


    .stat-card h3{

        font-size:2.1rem;

    }


    .feature-card,
    .benefit-card{

        padding:28px 22px;

    }


    .ai-flow{

        padding:22px;

    }


    .workflow-step{

        min-height:auto;

    }


    .footer{

        padding-top:60px;

    }


}


/* ==========================================================
   ACCESSIBILITY
========================================================== */


@media(prefers-reduced-motion:reduce){


    *,
    *::before,
    *::after{

        animation-duration:.01ms!important;

        animation-iteration-count:1!important;

        scroll-behavior:auto!important;

        transition-duration:.01ms!important;

    }


}

.page-video{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    object-fit:cover;

    z-index:-5;

}

.page-overlay{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    background:rgba(0,0,0,.45);

    z-index:-4;

}

/* ==========================================================
   HISTORY / ABOUT SECTION
========================================================== */

.history{
    position:relative;
    padding:110px 0;
}

.history-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:56px;
    align-items:start;
}

.history-timeline{
    position:relative;
    padding-left:34px;
}

.history-timeline::before{
    content:"";
    position:absolute;
    top:6px;
    bottom:6px;
    left:9px;
    width:2px;
    background:linear-gradient(
        180deg,
        var(--primary),
        rgba(148,163,255,.12)
    );
}

.history-milestone{
    position:relative;
    padding-bottom:38px;
}

.history-milestone:last-child{
    padding-bottom:0;
}

.history-dot{
    position:absolute;
    top:4px;
    left:-34px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--surface);
    border:3px solid var(--primary);
    box-shadow:0 0 0 4px rgba(62,123,250,.14);
}

.history-milestone-final .history-dot{
    border-color:var(--cyan);
    box-shadow:0 0 0 4px rgba(34,211,238,.16),0 0 22px rgba(34,211,238,.4);
}

.history-year{
    display:inline-block;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--cyan);
    margin-bottom:8px;
}

.history-milestone-body h3{
    font-size:1.08rem;
    color:var(--gray-900);
    margin-bottom:10px;
    line-height:1.4;
}

.history-milestone-body p{
    color:var(--gray-500);
    font-size:.95rem;
    line-height:1.75;
}

.history-visual{
    position:sticky;
    top:110px;
}

.history-card{
    background:linear-gradient(160deg,rgba(148,163,255,.06),rgba(148,163,255,.015));
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:38px 32px;
    box-shadow:var(--shadow-md);
    backdrop-filter:blur(14px);
}

.history-card-icon{
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    box-shadow:var(--shadow-md),0 0 22px rgba(62,123,250,.4);
    margin-bottom:22px;
}

.history-card h3{
    font-size:1.2rem;
    color:var(--gray-900);
    margin-bottom:14px;
}

.history-card p{
    color:var(--gray-500);
    font-size:.95rem;
    line-height:1.75;
    margin-bottom:26px;
}

.history-card-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    padding-top:22px;
    border-top:1px solid var(--line);
}

.history-card-stat{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.history-card-stat-number{
    font-size:1.6rem;
    font-weight:800;
    color:var(--gray-900);
}

.history-card-stat-label{
    font-size:.78rem;
    color:var(--gray-500);
}

@media (max-width:900px){

    .history-grid{
        grid-template-columns:1fr;
    }

    .history-visual{
        position:static;
    }

}

/* ==========================================================
   END OF LANDING PAGE STYLESHEET
========================================================== */
/* =========================================================
   TECHNOLOGY SECTION — REFERENCE-MATCHED REDESIGN
   Scoped exclusively to #technology / .technology-* / .tech-*
   ========================================================= */
#technology.technology {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 760px;
    padding: 52px 0 88px;
    background:
        radial-gradient(circle at 48% 48%, rgba(68, 157, 255, .12), transparent 28%),
        radial-gradient(circle at 82% 42%, rgba(125, 72, 255, .10), transparent 30%),
        linear-gradient(135deg, #f8fbff 0%, #eef5ff 54%, #f8fbff 100%);
}

#technology.technology::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 25%, rgba(77, 174, 255, .10), transparent 20%),
        radial-gradient(circle at 65% 75%, rgba(126, 92, 255, .12), transparent 22%);
    z-index: -2;
}

#technology .technology-shell {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(330px, .88fr) minmax(300px, .72fr) minmax(520px, 1.28fr);
    align-items: center;
    gap: 26px;
}

#technology .technology-intro { min-width: 0; padding-left: 8px; }

#technology .tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border: 1px solid rgba(58, 151, 255, .16);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(227, 243, 255, .96), rgba(237, 247, 255, .72));
    color: #1677df;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 8px 24px rgba(43, 128, 220, .08);
}
#technology .tech-badge-star { font-size: 17px; line-height: 1; }
#technology .tech-kicker {
    margin: 15px 0 8px;
    color: #4b82d8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .28em;
    text-transform: uppercase;
}
#technology .technology-intro h2 {
    margin: 0;
    color: #08265a;
    font-size: clamp(42px, 4vw, 64px);
    line-height: .98;
    letter-spacing: -.045em;
    font-weight: 800;
}
#technology .technology-intro h2 span {
    background: linear-gradient(90deg, #087fff 0%, #4c6fff 42%, #a82fe8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
#technology .tech-description {
    max-width: 455px;
    margin: 24px 0 24px;
    color: #5a73a0;
    font-size: 15.5px;
    line-height: 1.7;
}

#technology .tech-highlights {
    display: grid;
    grid-template-columns: repeat(4, minmax(64px, 1fr));
    gap: 12px;
    max-width: 475px;
}
#technology .tech-highlight { text-align: center; color: #092b66; font-size: 12px; line-height: 1.35; }
#technology .tech-highlight strong,
#technology .tech-highlight span { display: block; }
#technology .tech-highlight strong { font-size: 12px; margin-top: 7px; }
#technology .tech-highlight span { font-weight: 700; }
#technology .tech-highlight-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border-radius: 17px;
    font-size: 25px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 24px rgba(44, 103, 190, .08);
}
#technology .target-icon { color: #087df5; background: #e2f2ff; }
#technology .bolt-icon { color: #4655e9; background: #e8eaff; }
#technology .shield-icon { color: #0bb98a; background: #e2f8f1; }
#technology .chip-icon { color: #6637e8; background: #eee5ff; font-size: 17px; }

#technology .tech-actions { display: flex; align-items: center; gap: 18px; margin-top: 27px; }
#technology .tech-primary-btn,
#technology .tech-secondary-btn { text-decoration: none; }
#technology .tech-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding: 13px 18px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(100deg, #087dff, #5c35ec);
    box-shadow: 0 12px 28px rgba(53, 82, 238, .26);
    font-size: 13px;
    font-weight: 800;
}
#technology .tech-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #173e7a;
    font-size: 13px;
    font-weight: 800;
}
#technology .play-dot {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #2459d9;
    background: #e8f0ff;
    font-size: 9px;
}

#technology .technology-illustration-wrap {
    position: relative;
    min-height: 520px;
    display: grid;
    place-items: center;
}
#technology .technology-illustration-glow {
    position: absolute;
    width: 370px;
    height: 370px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 149, 255, .27), rgba(112, 72, 255, .10) 42%, transparent 70%);
    filter: blur(5px);
}
#technology .technology-illustration {
    position: relative;
    z-index: 1;
    width: min(100%, 500px);
    max-height: 540px;
    object-fit: contain;
    filter: drop-shadow(0 26px 35px rgba(37, 91, 190, .18));
}

#technology .technology-methods {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
#technology .tech-method-card {
    position: relative;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 56px 18px;
    align-items: center;
    gap: 16px;
    min-height: 118px;
    padding: 15px 18px;
    overflow: hidden;
    border: 1px solid rgba(150, 178, 224, .20);
    border-left: 7px solid var(--accent);
    border-radius: 22px;
    background: rgba(255,255,255,.79);
    box-shadow: 0 13px 32px rgba(60, 106, 176, .10), inset 0 1px 0 rgba(255,255,255,.85);
    backdrop-filter: blur(15px);
}
#technology .tech-method-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, var(--wash), transparent 42%);
}
#technology .method-blue { --accent:#148cff; --wash:rgba(20,140,255,.07); }
#technology .method-purple { --accent:#673bff; --wash:rgba(103,59,255,.07); }
#technology .method-green { --accent:#16bd91; --wash:rgba(22,189,145,.07); }
#technology .method-pink { --accent:#cf3ce3; --wash:rgba(207,60,227,.07); }
#technology .tech-method-icon {
    position: relative;
    z-index: 1;
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: var(--accent);
    background: var(--wash);
    font-size: 29px;
    font-weight: 900;
}
#technology .method-green .tech-method-icon { font-size: 18px; }
#technology .tech-method-copy { position: relative; z-index: 1; min-width: 0; }
#technology .tech-method-copy h3 { margin: 0 0 6px; color: #0a2d65; font-size: 15px; line-height: 1.2; }
#technology .tech-method-copy p { margin: 0; color: #607aa8; font-size: 12.5px; line-height: 1.48; }
#technology .tech-method-number {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--accent);
    background: var(--wash);
    font-size: 17px;
    font-weight: 900;
}
#technology .tech-method-arrow { position: relative; z-index: 1; color: var(--accent); font-size: 22px; }

#technology .technology-process {
    grid-column: 3;
    margin-top: -1px;
    min-height: 112px;
    padding: 14px 17px 16px;
    border: 1px solid rgba(141, 176, 229, .22);
    border-radius: 20px;
    background: rgba(255,255,255,.75);
    box-shadow: 0 14px 34px rgba(52, 101, 180, .10), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(15px);
}
#technology .technology-process-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#technology .technology-process-title { display: flex; align-items: center; gap: 10px; color: #0b2d67; font-weight: 900; font-size: 15px; }
#technology .technology-process-title span {
    width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px;
    color: #fff; background: linear-gradient(135deg, #168cff, #4f4bed);
    font-size: 15px;
}
#technology .technology-process-link { color: #7690bd; font-size: 10px; font-weight: 700; }
#technology .technology-process-flow { display: flex; align-items: center; gap: 7px; }
#technology .technology-process-step {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 9px;
    border-radius: 17px;
    color: #2859bf;
    background: #edf5ff;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}
#technology .technology-process-step:nth-child(3) { color: #0ba27e; background: #e8faf5; }
#technology .technology-process-step:nth-child(5) { color: #aa24c6; background: #faeaff; }
#technology .technology-process-step.final { color: #fff; background: linear-gradient(100deg, #155ff0, #3c48e8); box-shadow: 0 9px 20px rgba(50, 83, 228, .22); }
#technology .technology-process-arrow { color: #75a0df; font-weight: 900; }

#technology .technology-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(.2px); z-index: -1; }
#technology .technology-orb-a { width: 330px; height: 330px; left: -150px; top: -145px; background: radial-gradient(circle at 60% 60%, rgba(115, 179, 255, .32), rgba(90, 119, 255, .08) 58%, transparent 70%); }
#technology .technology-orb-b { width: 420px; height: 420px; right: -240px; bottom: -260px; background: radial-gradient(circle, rgba(93, 112, 255, .34), rgba(83, 164, 255, .08) 56%, transparent 72%); }
#technology .technology-dots { position: absolute; width: 55px; height: 55px; opacity: .45; background-image: radial-gradient(#8ab7ec 1.4px, transparent 1.4px); background-size: 10px 10px; pointer-events: none; }
#technology .technology-dots-top { top: 45px; left: 49%; }
#technology .technology-dots-bottom { right: 26px; bottom: 30px; }

#technology .technology-bottom-strip {
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: -52px;
    height: 125px;
    border-radius: 50% 50% 0 0 / 36% 36% 0 0;
    background: #06265c;
    box-shadow: 0 -8px 28px rgba(8, 57, 129, .14);
    z-index: 1;
}

@media (max-width: 1200px) {
    #technology .technology-shell { grid-template-columns: minmax(300px, .9fr) minmax(270px, .7fr) minmax(450px, 1.2fr); gap: 15px; }
    #technology .technology-intro h2 { font-size: 48px; }
    #technology .tech-method-card { grid-template-columns: 82px minmax(0, 1fr) 48px 12px; gap: 11px; }
    #technology .tech-method-icon { width: 70px; height: 70px; }
    #technology .tech-method-number { width: 48px; height: 48px; }
}

@media (max-width: 980px) {
    #technology.technology { padding-bottom: 100px; }
    #technology .technology-shell { grid-template-columns: 1fr 1fr; }
    #technology .technology-intro { grid-column: 1 / -1; max-width: 760px; margin: 0 auto; text-align: center; padding-left: 0; }
    #technology .tech-description, #technology .tech-highlights { margin-left: auto; margin-right: auto; }
    #technology .tech-actions { justify-content: center; }
    #technology .technology-illustration-wrap { grid-column: 1; min-height: 400px; }
    #technology .technology-methods { grid-column: 2; }
    #technology .technology-process { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    #technology.technology { min-height: auto; padding: 38px 0 100px; }
    #technology .technology-shell { grid-template-columns: 1fr; }
    #technology .technology-intro, #technology .technology-illustration-wrap, #technology .technology-methods, #technology .technology-process { grid-column: 1; }
    #technology .technology-intro h2 { font-size: clamp(40px, 12vw, 58px); }
    #technology .technology-illustration-wrap { min-height: 310px; }
    #technology .technology-illustration { width: min(92%, 420px); }
    #technology .technology-method-card { min-height: 105px; grid-template-columns: 72px minmax(0,1fr) 44px 10px; }
    #technology .tech-method-icon { width: 62px; height: 62px; border-radius: 17px; }
    #technology .tech-method-copy h3 { font-size: 14px; }
    #technology .tech-method-copy p { font-size: 11.5px; }
    #technology .technology-process-flow { overflow-x: auto; padding-bottom: 3px; }
    #technology .technology-process-step { min-width: 112px; }
    #technology .technology-process-arrow { flex: 0 0 auto; }
    #technology .technology-bottom-strip { height: 80px; bottom: -38px; }
}