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

    :root{
      --ink:        #0F1C2E;
      --ink-soft:   #2D3F55;
      --slate:      #4A6080;
      --slate-light:#7A95B0;
      --mist:       #EDF2F7;
      --mist-dark:  #D8E3EE;
      --amber:      #178ECE;
      --amber-pale: #eff9ff;
      --amber-dark: #178ECE;
      --indigo:     #4361C2;
      --indigo-pale:#EDF0FB;
      --indigo-light:#6B84D8;
      --crimson:    #C0392B;
      --bg:         #F4F7FB;
      --card:       #FFFFFF;
      --line:       rgba(15,28,46,.10);
      --radius:     10px;
      --radius-lg:  18px;
      --shadow:     0 2px 12px rgba(15,28,46,.07);
      --shadow-md:  0 6px 24px rgba(15,28,46,.11);
      --t:          .26s cubic-bezier(.4,0,.2,1);
    }

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;font-size:15px}
    body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);line-height:1.58;}
    .container{max-width:1080px;margin:0 auto;padding:0 22px}
    /* ::-webkit-scrollbar{width:5px}
    ::-webkit-scrollbar-track{background:rgba(23,142,206,.08)}
    ::-webkit-scrollbar-thumb{background:var(--amber);border-radius:99px} */

    .scroll-bar{position:fixed;top:0;left:0;height:3px;width:0;z-index:300;background:linear-gradient(90deg,var(--amber),var(--indigo),#0F172A)}

    /* HEADER */
    .header{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(15,28,46,.97);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06);transition:box-shadow var(--t)}
    .header.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.25)}
    .header-inner{display:flex;align-items:center;justify-content:space-between;height:56px}
    .brand{display:flex;align-items:center;gap:9px;text-decoration:none}
    .brand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .brand-divider{width:1px;height:16px;background:rgba(255,255,255,.2)}
    .brand-sub{font-size:.72rem;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:.2px}
    .nav-list{display:flex;gap:2px;list-style:none;align-items:center}
    .nav-link{font-size:.8rem;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;padding:5px 12px;border-radius:99px;transition:background var(--t),color var(--t)}
    .nav-link:hover{background:rgba(255,255,255,.1);color:#fff}
    .nav-cta{background:linear-gradient(135deg,var(--amber),var(--amber-dark))!important;color:#fff!important;padding:5px 16px!important;box-shadow:0 3px 10px rgba(23,142,206,.4)}
    .nav-cta:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(23,142,206,.5);color:#fff!important}
    .nav-links{display:flex;gap:4px;list-style:none}
    

    /* BREADCRUMB */
    .breadcrumb-bar{background:#0F1C2E;border-bottom:1px solid rgba(255,255,255,.08);padding:7px 0;margin-top:56px}
    .breadcrumb{display:flex;align-items:center;gap:8px;font-size:.73rem;color:rgba(255,255,255,.55)}
    .breadcrumb a{color:var(--amber);text-decoration:none;font-weight:800}
    .breadcrumb a:hover{text-decoration:underline}
    .breadcrumb-sep{color:rgba(255,255,255,.25)}

    /* HERO */
    .hero{
      padding:74px 0 34px;
      background:linear-gradient(135deg,rgba(15,28,46,.91) 0%,rgba(15,28,46,.76) 45%,rgba(15,28,46,.89) 100%),url('https://images.unsplash.com/photo-1573164713988-8665fc963095?w=1400&q=80&fit=crop') center/cover no-repeat;
      position:relative;overflow:hidden
    }
    .hero::before{
      content:'';
      position:absolute;top:-120px;right:-120px;width:380px;height:380px;border-radius:50%;
      background:radial-gradient(circle,rgba(23,142,206,.14) 0%, transparent 65%);
      pointer-events:none
    }
    .hero::after{
      content:'';
      position:absolute;bottom:-90px;left:-90px;width:320px;height:320px;border-radius:50%;
      background:radial-gradient(circle,rgba(67,97,194,.14) 0%, transparent 70%);
      pointer-events:none
    }
    .hero-inner{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:center;position:relative;z-index:1}
    .hero-eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgb(28 42 62);border:1px solid rgb(60 72 94);color:#6adcb1;font-size:.67rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;padding:4px 12px;border-radius:99px;margin-bottom:14px}
    .hero-eyebrow-dot{width:6px;height:6px;background:#6adcb1;border-radius:50%;animation:blink 2s infinite}
    @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
    .hero h1{font-family:'Inter',sans-serif;font-size:clamp(1.55rem,2.8vw,2.25rem);font-weight:950;line-height:1.15;letter-spacing:-.6px;margin-bottom:10px;color:#fff}
    .hero h1 .accent{color:var(--amber)}
    .hero-tagline{font-size:1.02rem;color:rgba(255,255,255,.85);max-width:640px;line-height:1.42;margin-bottom:10px;font-weight:800}
    .hero-sub{font-size:.86rem;color:rgba(255,255,255,.62);max-width:760px;line-height:1.65;margin-bottom:18px}
    .hero-actions{display:flex;gap:10px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:999px;font-size:.83rem;font-weight:900;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t),color var(--t);font-family:inherit}
    .btn-primary{background:linear-gradient(135deg,var(--amber),var(--amber-dark));color:#fff;box-shadow:0 4px 16px rgba(23,142,206,.35)}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(23,142,206,.45)}
    .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20);color:#fff}
    .btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}

    .hero-card{
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.12);
      border-radius:var(--radius-lg);
      padding:18px 16px;
      box-shadow:var(--shadow-md);
      position:relative;overflow:hidden;
      backdrop-filter:blur(10px)
    }
    .hero-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--amber),var(--indigo))}
    .hero-card-title{font-size:.65rem;font-weight:950;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}
    .hero-card-list{list-style:none;display:flex;flex-direction:column;gap:9px}
    .hero-card-list li{display:flex;align-items:flex-start;gap:10px;font-size:.8rem;color:rgba(255,255,255,.82);font-weight:700}
    .hero-card-list .ico{width:28px;height:28px;border-radius:9px;background:rgba(23,142,206,.14);color:var(--amber);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.85rem}

    /* SECTIONS */
    section{padding:60px 0 !important;}
    .s-tag{display:inline-block;font-size:.66rem;font-weight:950;letter-spacing:1px;text-transform:uppercase;color:var(--amber-dark);background:var(--amber-pale);border:1px solid rgba(23,142,206,.18);padding:3px 10px;border-radius:999px;margin-bottom:6px}
    .s-title{font-family:'Inter',sans-serif;font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:950;letter-spacing:-.5px;margin-bottom:4px}
    .s-sub{font-size:.86rem;color:var(--slate);max-width:820px;line-height:1.65;margin-bottom:14px}
    .center{text-align:center}
    .center .s-sub{margin-left:auto;margin-right:auto}

    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .split{display:grid;grid-template-columns:1.05fr .95fr;gap:12px;align-items:start}

    .card{
      background:var(--card);
      border:1px solid rgba(11,18,32,.10);
      border-radius:var(--radius);
      padding:16px 16px;
      box-shadow:var(--shadow);
      transition:transform var(--t),box-shadow var(--t),border-color var(--t);
      position:relative;overflow:hidden
    }
    .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(23,142,206,.22)}
    .card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--amber),transparent);transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
    .card:hover::after{transform:scaleX(1)}
    .card h3{font-size:.92rem;font-weight:950;color:var(--ink);margin-bottom:6px;display:flex;align-items:center;gap:8px}
    .card h3 .cico{width:28px;height:28px;border-radius:9px;background:rgba(23,142,206,.10);color:var(--amber-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.9rem}
    .card p{font-size:.8rem;color:var(--slate);line-height:1.6}

    .bullet{list-style:none;padding:0;margin:0}
    .bullet li{position:relative;padding-left:1.15em;margin-bottom:5px;font-size:.83rem;color:var(--slate);line-height:1.55}
    .bullet li::before{content:'›';position:absolute;left:0;color:var(--amber);font-weight:950}

    /* HOW (pipeline) */
    .pipe{background:rgba(255,255,255,.54);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .flow{
      display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:stretch
    }
    .step{
      background:rgba(255,255,255,.70);
      border:1px solid rgba(11,18,32,.10);
      border-radius:var(--radius);
      padding:14px 14px;
      box-shadow:var(--shadow);
      transition:border-color var(--t),transform var(--t),box-shadow var(--t)
    }
    .step:hover{transform:translateY(-2px);border-color:rgba(23,142,206,.22);box-shadow:var(--shadow-md)}
    .step .n{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--amber),var(--amber-dark));color:#fff;font-weight:950;display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:.8rem}
    .step h4{font-size:.84rem;font-weight:950;color:var(--ink);margin-bottom:6px}
    .step p{font-size:.78rem;color:var(--slate);line-height:1.55;margin:0}

    /* CODE BLOCK */
    .code{
      background:#0B1220;
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius);
      padding:14px 14px;
      color:rgba(255,255,255,.86);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:.76rem;
      line-height:1.55;
      overflow:auto;
      box-shadow:var(--shadow-md)
    }
    .code b{color:var(--amber)}
    .code .c{color:rgba(255,255,255,.5)}

    /* PROJECTS */
    .projects{background:linear-gradient(160deg,rgba(23,142,206,.06) 0%, rgba(231,211,176,.10) 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .proj{padding:18px 18px}
    .proj-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:10px}
    .proj-title{font-size:.95rem;font-weight:950;color:var(--ink)}
    .proj-tag{font-size:.66rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid rgba(231,211,176,.35);background:rgba(231,211,176,.16);color:#6A5327}
    .mini{background:rgba(255,255,255,.70);border:1px solid rgba(11,18,32,.10);border-radius:var(--radius);padding:12px 12px}
    .mini h5{font-size:.8rem;font-weight:950;color:var(--ink);margin-bottom:6px}
    .mini p{font-size:.78rem;color:var(--slate);line-height:1.55;margin:0}

    /* FAQ */
    .faq{background:rgba(255,255,255,.54);border-top:1px solid var(--line)}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .faq-item{background:rgba(255,255,255,.70);border:1px solid rgba(11,18,32,.10);border-radius:var(--radius);overflow:hidden;transition:border-color var(--t),box-shadow var(--t)}
    .faq-item.open{border-color:rgba(23,142,206,.26);box-shadow:var(--shadow)}
    .faq-q{width:100%;text-align:left;background:none;border:none;padding:13px 14px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:.84rem;font-weight:950;color:var(--ink);font-family:inherit;gap:12px}
    .faq-icon{width:24px;height:24px;border-radius:50%;background:rgba(11,18,32,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform var(--t),background var(--t)}
    .faq-item.open .faq-icon{background:rgba(23,142,206,.14);transform:rotate(180deg)}
    .faq-icon svg{stroke:rgba(11,18,32,.55)}
    .faq-item.open .faq-icon svg{stroke:var(--amber-dark)}
    .faq-a{display:none;padding:0 14px 14px;font-size:.8rem;color:var(--slate);line-height:1.65}
    .faq-item.open .faq-a{display:block}

    /* CTA */
    .cta{
      background:linear-gradient(145deg,#0B1220 0%, #0F172A 100%);
      padding:34px 0;position:relative;overflow:hidden;
      border-top:1px solid rgba(255,255,255,.06)
    }
    .cta::before{
      content:'';
      position:absolute;top:-120px;left:50%;transform:translateX(-50%);
      width:460px;height:460px;border-radius:50%;
      background:radial-gradient(circle,rgba(23,142,206,.24),transparent 65%);
      pointer-events:none
    }
    /* .cta h2{font-family:'Inter',sans-serif;font-size:clamp(1.25rem,2.2vw,1.65rem);font-weight:950;color:#fff;margin-bottom:8px;position:relative}
    .cta p{color:rgba(255,255,255,.72);font-size:.88rem;max-width:720px;margin:0 auto 16px;line-height:1.6;position:relative}
    .cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative}
    .btn-cta-p{background:linear-gradient(135deg,var(--amber),var(--amber-dark));color:#fff;box-shadow:0 12px 28px rgba(23,142,206,.26)}
    .btn-cta-p:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(23,142,206,.32)}
    .btn-cta-g{background:rgba(255,255,255,.08);color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.18)}
    .btn-cta-g:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)} */

    /* FOOTER */
    footer{background:#0A0F18;border-top:1px solid rgba(255,255,255,.06);padding:14px 0}
    .footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
    .footer-brand{font-family:'Inter',sans-serif;font-weight:900;font-size:.82rem;color:rgba(255,255,255,.50)}
    .footer-links{display:flex;gap:14px}
    .footer-links a{font-size:.74rem;color:rgba(255,255,255,.34);text-decoration:none;transition:color var(--t)}
    .footer-links a:hover{color:var(--amber)}
    .footer-copy{font-size:.72rem;color:rgba(255,255,255,.26)}

    /* REVEAL */
    .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
    .reveal.visible{opacity:1;transform:translateY(0)}

    /* RESPONSIVE */
    @media (max-width: 980px){
      .hero-inner{grid-template-columns:1fr}
      .hero-card{max-width:460px}
      .grid-3{grid-template-columns:1fr}
      .grid-2{grid-template-columns:1fr}
      .split{grid-template-columns:1fr}
      .flow{grid-template-columns:1fr 1fr}
      .faq-grid{grid-template-columns:1fr}
      .nav-links{display:none}
    }
    @media (max-width: 600px){
      .container{padding:0 16px}
      .hero{padding:68px 0 28px}
      section{padding:22px 0}
      .flow{grid-template-columns:1fr}
    }
    /* ── HERO ENTRY & CARD ANIMATIONS ── */
    @keyframes hcard-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
    .hcard-floating{animation:hcard-float 5s ease-in-out infinite}
    @keyframes hcard-stripe{0%{background-position:0 0}100%{background-position:300% 0}}
    .side::before,.hero-card::before{background:linear-gradient(90deg,#178ECE,#178ECE,#4361C2,#178ECE,#178ECE)!important;background-size:300% 100%!important;animation:hcard-stripe 3.5s linear infinite}
    /* CTA FORM STYLES */
    .cta { background: linear-gradient(135deg, var(--ink) 0%, #1a3050 100%); padding: 60px 0; position: relative; overflow: hidden; }
    .cta-bg { position: absolute; inset: 0; pointer-events: none; }
    .cta-bg .cb1 { position: absolute; top: -60px; right: -60px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(23,142,206,.14) 0%, transparent 70%); }
    .cta-bg .cb2 { position: absolute; bottom: -40px; left: 5%; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(67,97,194,.12) 0%, transparent 70%); }
    .cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
    .cta-headline { font-size: clamp(1.2rem, 2.3vw, 1.65rem); font-weight: 800; color: #fff; letter-spacing: -.4px; margin-bottom: 8px; }
    .cta-sub { font-size: 1rem; color: rgba(255,255,255,.6); max-width: 400px; margin-bottom: 22px; line-height: 1.65; }
    .cta-email { display: inline-flex; align-items: center; gap: 7px; color: var(--amber); font-size: .9rem; font-weight: 600; text-decoration: none; }
    .cta-email:hover { text-decoration: underline; }
    .cta-note { font-size: .78rem; color: rgba(255,255,255,.3); margin-top: 8px; }
    .cta-form-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding: 26px 24px; backdrop-filter: blur(8px); }
    .cta-form { display: flex; flex-direction: column; gap: 11px; }
    .cta-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .cta-field { display: flex; flex-direction: column; gap: 4px; }
    .cta-label { font-size: .67rem; font-weight: 700; color: rgba(255,255,255,.4); letter-spacing: .5px; text-transform: uppercase; }
    .cta-input, .cta-select, .cta-textarea { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 9px 13px; font-size: .875rem; color: #fff; font-family: inherit; transition: border-color var(--t), background var(--t); outline: none; width: 100%; }
    .cta-input::placeholder, .cta-textarea::placeholder { color: rgba(255,255,255,.28); }
    .cta-input:focus, .cta-select:focus, .cta-textarea:focus { border-color: var(--amber); background: rgba(255,255,255,.1); }
    .cta-select { cursor: pointer; appearance: none; }
    .cta-select option { background: #0F1C2E; color: #fff; }
    .cta-textarea { resize: vertical; min-height: 80px; line-height: 1.55; }
    .cta-submit { background: linear-gradient(135deg, var(--amber), var(--amber-dark)); color: #fff; border: none; border-radius: 99px; padding: 11px 28px; font-size: 1rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all var(--t); letter-spacing: -.1px; align-self: center; margin-top: 4px; }
    .cta-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(23,142,206,.4); }
    @media (max-width: 900px) { .cta-inner { grid-template-columns: 1fr; } }

      #fulltitle{
    display: none;
  }

  input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="date"], textarea{
    min-width: 100%;
    background: rgba(255,255,255,.16) !important;
    border: 1px solid rgba(255,255,255,.32) !important;
  }