/* =========================================================
   Aklipi 3D Printing — matched to business card
   Navy + lime/blue/purple/orange, fun & simple
   ========================================================= */

:root{
    --navy:#0a1729;
    --navy-2:#0c1d33;
    --card:#102544;
    --card-2:#13294b;
    --line:rgba(135,180,255,.14);
    --line-2:rgba(135,180,255,.26);
    --text:#eaf1fb;
    --muted:#93a8c6;

    --blue:#19a5ec;
    --blue-d:#0e83d2;
    --green:#9acb1e;
    --purple:#8b5cf6;
    --orange:#f5821f;

    --grad-bg:linear-gradient(120deg,#19a5ec 0%,#9acb1e 100%);   /* logo blue→green */
    --rainbow:linear-gradient(90deg,#19a5ec,#9acb1e,#f5821f,#8b5cf6);

    --r:18px; --r-sm:12px;
    --maxw:1160px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    background:var(--navy);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
    background-image:
        radial-gradient(1100px 600px at 85% -5%, rgba(25,165,236,.10), transparent 60%),
        radial-gradient(900px 500px at 0% 8%, rgba(154,203,30,.07), transparent 55%);
    background-attachment:fixed;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
b{font-weight:700}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}

h1,h2,h3{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.4vw,3rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.15rem}

.c-green{color:var(--green)} .c-blue{color:var(--blue)} .c-purple{color:var(--purple)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:1rem;
    padding:.85rem 1.6rem;border-radius:999px;cursor:pointer;border:2px solid transparent;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.btn-grad{background:var(--grad-bg);color:#06121f;box-shadow:0 12px 30px -10px rgba(25,165,236,.6)}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(154,203,30,.6)}
.btn-line{background:rgba(255,255,255,.03);border-color:var(--line-2);color:var(--text)}
.btn-line:hover{transform:translateY(-2px);border-color:var(--blue);color:#fff}
.btn-block{width:100%}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(10,23,41,.82);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:1.2rem;height:66px}
.brand{display:flex;align-items:center;gap:.55rem}
.brand img{border-radius:8px}
.brand-tx{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.02em}
.brand-tx b{color:var(--blue)}
.nav{display:flex;align-items:center;gap:1.7rem;margin-left:auto;font-size:.96rem}
.nav a{color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--text)}
.nav .nav-btn{color:#06121f;background:var(--grad-bg);padding:.5rem 1.1rem;border-radius:999px;font-weight:700}
.nav .nav-btn:hover{color:#06121f;transform:translateY(-1px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:6px;cursor:pointer}
.burger span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.25s}
.m-menu{display:none;flex-direction:column;padding:.6rem 22px 1.1rem;background:var(--navy-2);border-bottom:1px solid var(--line)}
.m-menu a{padding:.7rem .2rem;color:var(--muted);border-bottom:1px solid var(--line)}

/* hero */
.hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,5vw,3.5rem)}
.hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center}
.hero-logo{width:min(100%,560px);height:auto;margin-bottom:1.1rem}
.tagline{font-family:'Space Grotesk',sans-serif;font-style:italic;font-weight:700;color:var(--green);font-size:clamp(1.05rem,2.2vw,1.45rem);margin-bottom:1rem;position:relative;display:inline-block}
.tagline::after{content:"";position:absolute;left:0;bottom:-7px;width:100%;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--green),var(--blue));opacity:.85}
.hero h1{margin:.4rem 0 .9rem;max-width:18ch}
.sub{color:var(--muted);font-size:clamp(1rem,1.6vw,1.15rem);max-width:46ch;margin-bottom:1.7rem}
.cta{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-visual{position:relative}
.hero-visual img{width:100%;border-radius:var(--r);border:1px solid var(--line-2);box-shadow:0 30px 60px -25px rgba(0,0,0,.8)}

/* sections */
.section{padding:clamp(3rem,6vw,5rem) 0}
.section-alt{background:var(--navy-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.head{text-align:center;max-width:620px;margin:0 auto 2.6rem}
.kick{display:inline-block;font-family:'Space Grotesk',sans-serif;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--blue);margin-bottom:.7rem}
.head h2{margin-bottom:.6rem}
.head p{color:var(--muted)}

/* print cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.pcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .25s}
.pcard::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;border-radius:var(--r) var(--r) 0 0}
.pcard:hover{transform:translateY(-5px);box-shadow:0 22px 50px -24px rgba(0,0,0,.75)}
.pcard[data-m="green"]{--mc:var(--green)} .pcard[data-m="blue"]{--mc:var(--blue)} .pcard[data-m="purple"]{--mc:var(--purple)}
.pcard::before{background:var(--mc)}
.pcard:hover{border-color:color-mix(in srgb,var(--mc) 55%,transparent)}
.picon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin-bottom:1rem;
    background:color-mix(in srgb,var(--mc) 14%,transparent);border:1px solid color-mix(in srgb,var(--mc) 35%,transparent)}
.picon svg{width:30px;height:30px;fill:none;stroke:var(--mc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mtag{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.05em;color:var(--mc);
    background:color-mix(in srgb,var(--mc) 13%,transparent);border:1px solid color-mix(in srgb,var(--mc) 32%,transparent);
    padding:.2rem .6rem;border-radius:7px;margin-bottom:.7rem}
.pcard h3{margin-bottom:.45rem}
.pcard p{color:var(--muted);font-size:.96rem}

/* rainbow pill */
.rainbow-pill{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:1.8rem auto 0;max-width:760px;
    padding:.9rem 1.4rem;border-radius:999px;background:var(--card);position:relative;font-family:'Space Grotesk',sans-serif;font-weight:700;
    letter-spacing:.02em;color:var(--text);border:2px solid transparent;
    background-image:linear-gradient(var(--card),var(--card)),var(--rainbow);background-origin:border-box;background-clip:padding-box,border-box;
    transition:transform .2s}
.rainbow-pill:hover{transform:translateY(-2px)}
.rainbow-pill svg{width:26px;height:26px;flex:0 0 auto;fill:none;stroke-width:1.6;stroke-linejoin:round;stroke:url(#);stroke:var(--blue)}
.rainbow-pill span{font-size:clamp(.8rem,2vw,1.02rem)}
.rainbow-pill i{color:var(--blue);font-style:normal;margin:0 .15rem}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gal figure{border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);aspect-ratio:1/1;background:var(--card)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gal figure:hover img{transform:scale(1.07)}

/* steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;counter-reset:s}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.7rem 1.5rem;position:relative}
.snum{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font-family:'Space Grotesk',sans-serif;font-weight:700;
    font-size:1.2rem;color:#06121f;background:var(--grad-bg);margin-bottom:.8rem}
.steps h3{margin-bottom:.35rem}
.steps p{color:var(--muted);font-size:.95rem}

/* quote */
.quote-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:2.6rem;align-items:start}
.quote-side .kick{margin-bottom:.6rem}
.quote-side h2{margin-bottom:.8rem}
.quote-side > p{color:var(--muted);margin-bottom:1.2rem}
.ticks{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.3rem}
.ticks li{position:relative;padding-left:1.7rem;color:var(--text);font-size:.97rem}
.ticks li::before{content:"";position:absolute;left:0;top:.15rem;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--grad-bg)}
.ticks li::after{content:"✓";position:absolute;left:.27rem;top:.02rem;font-size:.78rem;font-weight:800;color:#06121f}
.email-line{padding-top:1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.email-line a{color:var(--blue);font-weight:700}

.qform{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.7rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fld{margin-bottom:1rem;display:flex;flex-direction:column}
.fld label{font-size:.85rem;font-weight:600;margin-bottom:.4rem}
.fld label span{color:var(--blue)}
.fld label .hint{color:var(--muted);font-weight:400;font-size:.76rem}
.fld input,.fld select,.fld textarea{width:100%;background:var(--navy);border:1px solid var(--line);border-radius:var(--r-sm);
    padding:.72rem .85rem;color:var(--text);font-family:inherit;font-size:.95rem;transition:border-color .2s,box-shadow .2s}
.fld input::placeholder,.fld textarea::placeholder{color:#62789a}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(25,165,236,.18)}
.fld textarea{resize:vertical}
.fld input[type=file]{padding:.5rem;cursor:pointer;color:var(--muted)}
.fld input[type=file]::file-selector-button{background:var(--grad-bg);color:#06121f;border:0;border-radius:8px;padding:.4rem .8rem;margin-right:.7rem;cursor:pointer;font-weight:700;font-family:inherit}
.filenote{font-size:.82rem;color:var(--muted);margin:.1rem 0 1.1rem}
.filenote a{color:var(--blue)}
.fstatus{margin-top:.8rem;text-align:center;font-size:.92rem;min-height:1.1rem}
.fstatus.ok{color:var(--green)} .fstatus.err{color:#fb7185}

/* footer */
.ftr{background:var(--navy-2);border-top:1px solid var(--line);padding-top:2.6rem}
.ftr-in{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-bottom:1.8rem}
.ftr-brand{max-width:340px}
.ftr-brand p{color:var(--muted);font-size:.9rem;margin-top:.6rem}
.ftr-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-content:flex-start}
.ftr-links a{color:var(--muted);font-size:.92rem;transition:color .2s}
.ftr-links a:hover{color:var(--blue)}
.ftr-bot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.2rem 22px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem}
.ftr-url{font-family:'Space Grotesk',sans-serif;font-weight:700}

/* responsive */
@media(max-width:900px){
    .hero-in{grid-template-columns:1fr;gap:2rem}
    .hero-visual{max-width:380px;margin:0 auto}
    .cards,.steps,.gal{grid-template-columns:repeat(2,1fr)}
    .quote-in{grid-template-columns:1fr;gap:1.8rem}
}
@media(max-width:680px){
    .nav{display:none}
    .burger{display:flex;margin-left:auto}
    .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
    .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    .m-menu{display:flex}
}
@media(max-width:540px){
    .cards,.steps{grid-template-columns:1fr}
    .gal{grid-template-columns:repeat(2,1fr)}
    .frow{grid-template-columns:1fr}
    .cta .btn{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}