/* 33X Cards — shares the 33x.digital palette and type (black/orange, Bebas Neue / DM Sans / Space Mono) */
:root{
  --black:#111111;
  --dark:#1a1a1a;
  --dark-2:#202020;
  --orange:#D35101;
  --orange-bright:#FF6B00;
  --white:#F5F5F0;
  --grey:#A3A39B;
  --grey-dim:#77776F;
  --border:rgba(255,255,255,0.08);
  --border-hi:rgba(255,255,255,0.16);
  --border-orange:rgba(255,107,0,0.4);
  --font-display:'Bebas Neue',Impact,sans-serif;
  --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'Space Mono',Menlo,monospace;
  --r-sm:8px;--r-md:14px;--r-lg:22px;--r-pill:999px;
  --gutter:16px;
}
@media (min-width:768px){:root{--gutter:32px;}}
@media (min-width:1200px){:root{--gutter:48px;}}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--font-body);font-size:1rem;line-height:1.6;overflow-x:hidden;}
img,iframe,video{max-width:100%;display:block;}
a{color:inherit;}
code{font-family:var(--font-mono);font-size:0.88em;color:var(--orange-bright);}
h1,h2,h3{margin:0;font-weight:400;line-height:1;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
::selection{background:var(--orange-bright);color:var(--black);}

.container{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gutter);}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--orange-bright);color:var(--black);padding:8px 14px;border-radius:var(--r-sm);z-index:100;}
.skip-link:focus{left:8px;}

/* Wordmark */
.wordmark{font-family:var(--font-display);font-size:1.7rem;letter-spacing:0.04em;text-decoration:none;color:var(--white);line-height:1;display:inline-flex;align-items:baseline;gap:6px;}
.wordmark span{color:var(--orange-bright);}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(17,17,17,0.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px;}
.nav-links{display:none;gap:28px;}
.nav-links a{text-decoration:none;font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--grey);transition:color .15s;}
.nav-links a:hover{color:var(--white);}
@media (min-width:860px){.nav-links{display:flex;}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:var(--r-pill);font-family:var(--font-mono);font-size:0.8rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .16s,border-color .16s,color .16s,transform .16s;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--orange-bright);color:var(--black);}
.btn-primary:hover{background:#ff8228;}
.btn-secondary{border-color:var(--border-hi);color:var(--white);background:transparent;}
.btn-secondary:hover{border-color:var(--orange-bright);color:var(--orange-bright);}
.btn-sm{padding:10px 18px;font-size:0.72rem;}
.btn:disabled{opacity:.6;cursor:wait;}
.text-link{font-family:var(--font-mono);font-size:0.78rem;color:var(--orange-bright);text-decoration:none;}
.text-link:hover{text-decoration:underline;}

/* Eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--orange-bright);border:1px solid var(--border-orange);padding:6px 13px;border-radius:var(--r-pill);}
.eyebrow--muted{color:var(--grey);border-color:var(--border-hi);}
.dot{width:6px;height:6px;border-radius:50%;background:var(--orange-bright);display:inline-block;}
.dot--pulse{animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,107,0,.5);}50%{opacity:.7;box-shadow:0 0 0 6px rgba(255,107,0,0);}}

/* Hero */
.hero{padding:72px 0 64px;position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;right:-20%;top:-30%;width:70vw;height:70vw;max-width:820px;max-height:820px;background:radial-gradient(circle,rgba(255,107,0,0.16),rgba(255,107,0,0) 62%);pointer-events:none;}
.hero .container{position:relative;}
.hero h1{font-family:var(--font-display);font-size:clamp(3.4rem,11vw,7.6rem);letter-spacing:0.01em;margin-top:24px;line-height:0.92;}
.hero h1 em{font-style:normal;color:var(--orange-bright);}
.lede{margin-top:26px;max-width:56ch;font-size:1.1rem;color:var(--grey);}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
.hero-note{margin-top:20px;font-size:0.85rem;color:var(--grey-dim);}
@media (min-width:768px){.hero{padding:110px 0 96px;}}

/* Sections */
.section{padding:80px 0;}
.section--alt{background:var(--dark);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
@media (min-width:768px){.section{padding:110px 0;}}
.section-heading{max-width:680px;}
.section-heading h2{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,3.8rem);letter-spacing:0.01em;margin-top:18px;}
.section-heading p{margin-top:16px;color:var(--grey);}

/* Demo phones */
.demo-grid{margin-top:52px;display:grid;gap:56px;}
@media (min-width:900px){.demo-grid{grid-template-columns:1fr 1fr;gap:40px;}}
.demo{margin:0;display:flex;flex-direction:column;align-items:center;gap:26px;}
.phone-frame{width:100%;max-width:410px;height:760px;max-height:88vh;border-radius:44px;border:1px solid var(--border-hi);background:linear-gradient(160deg,#262626,#161616);padding:12px;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset;position:relative;}
.phone-frame::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:90px;height:24px;border-radius:var(--r-pill);background:#050505;z-index:2;pointer-events:none;opacity:.9;}
.phone-frame iframe{width:100%;height:100%;border:0;border-radius:33px;background:#0d0d0d;}
.demo figcaption{max-width:410px;width:100%;text-align:left;}
.demo-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--orange-bright);}
.demo figcaption p{margin:10px 0 12px;color:var(--grey);font-size:0.95rem;}

.quote{margin:72px auto 0;max-width:760px;text-align:center;}
.quote p{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.2rem);line-height:1.05;letter-spacing:0.01em;}
.quote cite{display:block;margin-top:16px;font-style:normal;font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--orange-bright);}

/* Feature cards */
.feature-grid{margin-top:48px;display:grid;gap:16px;}
@media (min-width:860px){.feature-grid{grid-template-columns:repeat(3,1fr);gap:20px;}}
.feature{background:var(--dark-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:30px 26px;}
.section--alt .feature{background:var(--black);}
.feature-tag{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--orange-bright);}
.feature h3{font-family:var(--font-display);font-size:1.9rem;letter-spacing:0.02em;margin:14px 0 10px;}
.feature p{color:var(--grey);font-size:0.95rem;}

/* Two-col + checklist */
.two-col{display:grid;gap:40px;}
@media (min-width:900px){.two-col{grid-template-columns:1fr 1fr;gap:64px;align-items:start;}}
.check-list{display:flex;flex-direction:column;gap:16px;}
@media (min-width:900px){.check-list{margin-top:70px;}}
.check-list li{display:flex;gap:14px;align-items:flex-start;color:var(--grey);padding-bottom:16px;border-bottom:1px solid var(--border);}
.check-list svg{width:18px;height:18px;flex-shrink:0;margin-top:4px;fill:none;stroke:var(--orange-bright);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* Pricing */
.pricing-grid{margin-top:48px;display:grid;gap:18px;}
@media (min-width:860px){.pricing-grid{grid-template-columns:repeat(3,1fr);align-items:stretch;}}
.pricing-card{background:var(--black);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px 28px;display:flex;flex-direction:column;gap:14px;}
.pricing-card--featured{border-color:var(--border-orange);background:linear-gradient(165deg,rgba(255,107,0,.12),rgba(255,107,0,0) 60%),var(--black);}
.pricing-tag{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--orange-bright);}
.pricing-card h3{font-family:var(--font-display);font-size:1.8rem;letter-spacing:0.02em;}
.pricing-price{font-family:var(--font-display);font-size:3.4rem;line-height:1;}
.pricing-price span{font-family:var(--font-body);font-size:0.95rem;color:var(--grey-dim);}
.pricing-card p{color:var(--grey);font-size:0.93rem;flex:1;}
.pricing-buy{display:inline-flex;justify-content:center;padding:13px 18px;border-radius:var(--r-pill);font-family:var(--font-mono);font-size:0.76rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;text-decoration:none;border:1px solid var(--border-hi);transition:border-color .16s,color .16s,background .16s;}
.pricing-buy:hover{border-color:var(--orange-bright);color:var(--orange-bright);}
.pricing-card--featured .pricing-buy{background:var(--orange-bright);color:var(--black);border-color:transparent;}
.pricing-card--featured .pricing-buy:hover{background:#ff8228;color:var(--black);}
.split-note{margin-top:40px;display:grid;gap:24px;}
@media (min-width:768px){.split-note{grid-template-columns:1fr 1fr;gap:40px;}}
.split-note h3{font-family:var(--font-body);font-weight:700;font-size:1rem;margin-bottom:8px;}
.split-note p{color:var(--grey);font-size:0.95rem;}

/* Pills */
.pill-row{margin-top:40px;display:flex;flex-wrap:wrap;gap:10px;}
.tag-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--r-pill);border:1px solid var(--border-hi);font-family:var(--font-mono);font-size:0.74rem;color:var(--grey);}
.tag-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange-bright);}

/* Process */
.process-list{margin-top:48px;border-top:1px solid var(--border);}
.process-list li{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:28px 0;border-bottom:1px solid var(--border);}
@media (min-width:768px){.process-list li{grid-template-columns:90px 1fr;}}
.process-num{font-family:var(--font-display);font-size:2rem;color:var(--orange-bright);line-height:1;}
.process-list h3{font-family:var(--font-body);font-weight:700;font-size:1.08rem;margin-bottom:6px;line-height:1.3;}
.process-list p{color:var(--grey);}

/* FAQ */
.faq-list{margin-top:44px;display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;}
.faq-item{background:var(--dark);}
.faq-item summary{list-style:none;cursor:pointer;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:500;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-family:var(--font-mono);font-size:1.3rem;color:var(--orange-bright);flex-shrink:0;transition:transform .16s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-a{padding:0 24px 22px;color:var(--grey);max-width:68ch;}

/* CTA */
.cta-band{border:1px solid var(--border-orange);border-radius:var(--r-lg);padding:56px 24px;text-align:center;background:radial-gradient(ellipse at top,rgba(255,107,0,.16),rgba(255,107,0,0) 65%);}
.cta-band h2{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,4rem);margin:18px auto 0;max-width:16ch;}
.cta-band p{margin:14px auto 0;max-width:48ch;color:var(--grey);}
.cta-band .btn{margin-top:28px;}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:44px 0 28px;}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;}
.footer-sub{margin-top:8px;color:var(--grey-dim);font-size:0.88rem;}
.footer-sub a{color:var(--grey);}
.footer-links{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;}
.footer-links a{text-decoration:none;color:var(--grey);font-size:0.9rem;}
.footer-links a:hover{color:var(--orange-bright);}
.footer-bottom{margin-top:32px;padding-top:20px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;color:var(--grey-dim);font-size:0.8rem;}

/* Form (styled after the Finn & Cleo enquiry form) */
.form-card{background:var(--dark);border:1px solid var(--border);border-radius:var(--r-lg);padding:36px;margin-top:40px;}
@media (max-width:640px){.form-card{padding:22px;}}
.form-section-title{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--orange-bright);margin:30px 0 16px;padding-top:26px;border-top:1px solid var(--border);}
.form-section-title:first-child{margin-top:0;padding-top:0;border-top:0;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}
.form-field{display:flex;flex-direction:column;gap:7px;min-width:0;}
.form-field.full{grid-column:1/-1;}
.form-label{font-size:0.8rem;font-weight:700;}
.form-label .opt{font-weight:400;color:var(--grey-dim);font-size:0.76rem;}
.form-sublabel{display:block;font-size:0.76rem;font-weight:400;color:var(--grey-dim);margin-top:2px;}
.form-input,.form-select,.form-textarea{background:var(--black);border:1px solid var(--border-hi);border-radius:var(--r-sm);padding:12px 14px;color:var(--white);font-family:var(--font-body);font-size:0.95rem;outline:none;transition:border-color .2s;width:100%;}
.form-input::placeholder,.form-textarea::placeholder{color:var(--grey-dim);}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--orange-bright);}
.form-textarea{min-height:104px;resize:vertical;}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23FF6B00'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:32px;}
.link-rows{display:flex;flex-direction:column;gap:10px;}
.link-row{display:grid;grid-template-columns:150px 1fr auto;gap:10px;align-items:center;}
@media (max-width:640px){.link-row{grid-template-columns:1fr auto;}.link-row .form-select{grid-column:1/-1;}}
.btn-remove{background:none;border:1px solid var(--border-hi);color:var(--grey);border-radius:var(--r-sm);width:40px;height:44px;cursor:pointer;font-size:1.1rem;}
.btn-remove:hover{border-color:var(--orange-bright);color:var(--orange-bright);}
.btn-add{margin-top:12px;background:transparent;color:var(--orange-bright);border:1px solid var(--border-hi);border-radius:var(--r-sm);font-family:var(--font-body);font-size:0.85rem;font-weight:700;padding:10px 18px;cursor:pointer;}
.btn-add:hover{border-color:var(--orange-bright);background:rgba(255,107,0,.06);}
.btn-add:disabled{opacity:.4;cursor:not-allowed;}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;}
.choice{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--border-hi);border-radius:var(--r-sm);cursor:pointer;background:var(--black);transition:border-color .16s,background .16s;}
.choice input{position:absolute;opacity:0;pointer-events:none;}
.choice strong{font-size:0.92rem;}
.choice span{font-size:0.8rem;color:var(--grey-dim);}
.choice:has(input:checked){border-color:var(--orange-bright);background:rgba(255,107,0,.07);}
.choice:has(input:focus-visible){outline:2px solid var(--orange-bright);outline-offset:2px;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.field-error{border-color:#E0714A !important;}
.error-msg{display:block;font-size:0.76rem;color:#F08A64;}
.form-actions{display:flex;align-items:center;gap:14px;margin-top:28px;flex-wrap:wrap;}
.form-total{margin-left:auto;font-family:var(--font-mono);font-size:0.8rem;color:var(--grey);}
.form-total strong{color:var(--white);font-size:1rem;}
.form-note{font-size:0.78rem;color:var(--grey-dim);margin-top:16px;line-height:1.6;}
.form-note a{color:var(--orange-bright);}
#form-status{font-size:0.88rem;margin-top:14px;display:none;}
#form-status.err{color:#F08A64;display:block;}
.steps{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--grey-dim);}
.steps b{color:var(--orange-bright);font-weight:700;}