/* DigiDutch Luxury Brand — additive marketing theme.
   Shared tokens only; no authentication, billing or builder behavior changes.
   Visual direction: original navy/red DigiDutch identity with restrained champagne accents. */
:root{
  --bg:#060c1d;
  --surface:#101b32;
  --surface-2:#17243d;
  --ink:#f7f9ff;
  --muted:#b5c2d6;
  --dim:#91a3bf;
  --stroke:rgba(171,197,239,.19);
  --mint:#f0555b; /* backwards-compatible accent token */
  --blue:#3977f6;
  --gold:#d7b67b;
  --max:1200px;
}
body{
  background:radial-gradient(ellipse at 80% 7%,rgba(42,99,209,.28),transparent 39%),
    radial-gradient(ellipse at 12% 28%,rgba(203,36,57,.11),transparent 32%),var(--bg);
}
::selection{background:#d92e42;color:#fff}
.site-header{background:rgba(6,12,29,.84);border-bottom-color:rgba(175,201,244,.16)}
.wordmark{letter-spacing:.035em}
.brand-sign{
  color:#fff;
  background:linear-gradient(135deg,#0d2761 0%,#123a90 52%,#bf1939 53%,#f23544 100%);
  border-color:rgba(221,234,255,.38);
  box-shadow:0 6px 26px rgba(9,33,91,.45),inset 0 1px rgba(255,255,255,.28);
}
.wordmark small{color:#d0a66c}
.btn-primary{
  color:#fff;
  background:linear-gradient(110deg,#e22e42,#be153a 60%,#284ce3);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 12px 32px rgba(183,23,61,.25);
}
.btn-primary:hover{box-shadow:0 17px 43px rgba(218,40,72,.39)}
.btn-ghost{background:rgba(237,244,255,.055);border-color:rgba(192,211,246,.32)}
.btn-ghost:hover{border-color:#d7b67b}
.kicker,.text-link{color:#e9ba78}
.kicker:before{background:#d7b67b}
.gradient-text{
  background:linear-gradient(100deg,#fff 6%,#91b4ff 43%,#f05a6b 78%,#e3bb83);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.orb{background:radial-gradient(circle,rgba(53,97,233,.48),transparent 65%)}
.hero-visual:after{background:rgba(211,47,78,.18)}
.editor-frame{border-color:rgba(187,211,255,.36);background:linear-gradient(150deg,#1a2c51,#09152d);box-shadow:0 20px 70px rgba(2,5,16,.4),inset 0 1px rgba(255,255,255,.25)}
.frame-sidebar{background:#0d1b37}
.hero-demo{background:rgba(8,20,43,.7);border-color:rgba(215,182,123,.3)}
.hero-demo input,.hero-demo select{background:#101c33;border-color:rgba(177,204,252,.23)}
.hero-demo input:focus,.hero-demo select:focus{border-color:#d7b67b;box-shadow:0 0 0 3px rgba(215,182,123,.16)}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid #efb864;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.orb{animation:none}.btn{transition:none}}
@media(max-width:620px){.hero{padding-top:52px}.hero .wrap{gap:32px}.wordmark{letter-spacing:0}}


/* Arabic iPhone refinement: align the shipped landing page with approved
   navy/red identity rather than the older black/champagne-only appearance.
   Scoped to marketing hero so editor/checkout/customer themes stay intact. */
:root{--champagne:#d8bd8c;--gold-deep:#af8756}
.hero{
  background:radial-gradient(ellipse at 82% 42%,rgba(37,84,183,.19),transparent 58%),
    radial-gradient(ellipse at 6% 66%,rgba(208,36,67,.13),transparent 54%);
}
.hero .gradient-text{
  background:linear-gradient(105deg,#f8faff 0%,#8eb4ff 42%,#f14a65 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .kicker,.hero-demo-title{color:#e9bb80}
.hero .kicker:before{background:linear-gradient(90deg,#e9bb80,transparent)}
.hero-demo{
  border-color:rgba(111,152,234,.35);
  background:linear-gradient(145deg,rgba(14,27,57,.92),rgba(13,21,40,.95));
  box-shadow:0 16px 48px rgba(2,10,28,.23);
}
.hero-demo input,.hero-demo select{background:#0c1831;border-color:rgba(151,187,251,.28);color:#f6f8ff}
.hero-demo input::placeholder{color:#a8b4ca}
.hero-demo button,.hero-demo .btn-primary{
  color:#fff;background:linear-gradient(108deg,#df2945,#b81840 68%,#315dd9);
  border-color:rgba(235,76,100,.35);
}
.hero .micro-proof span{color:#b9c7de}
@media(max-width:620px){
  .hero{padding:44px 0 68px}
  .hero h1{font-size:clamp(2.35rem,10.3vw,3.45rem);line-height:1.22;margin:20px 0 22px}
  .hero-copy>p{font-size:1rem;line-height:1.8}
  .hero-demo{margin-top:24px}
  .hero-demo button{min-height:52px}
  [dir=rtl] .hero h1{font-size:clamp(2.25rem,9.5vw,3.35rem);line-height:1.35;overflow-wrap:normal}
  [dir=rtl] .hero-copy>p{line-height:1.85}
}
@media(max-width:390px){[dir=rtl] .hero h1{font-size:clamp(2.05rem,9vw,2.85rem)}}


/* Unified marketing design system — page hierarchy, cards and RTL mobile.
   These rules load AFTER the legacy champagne overrides in site.css.
   The main DigiDutch red/blue identity is primary; gold is a small accent. */
:root{
  --bg:#070f22;
  --surface:#111e36;
  --surface-2:#192946;
  --ink:#f7f9ff;
  --muted:#b9c6d9;
  --dim:#9cacbf;
  --stroke:rgba(160,192,248,.22);
  --mint:#e43b55;
  --blue:#679af8;
  --gold:#d2b17c;
  --champagne:#dfc391;
  --radius:20px;
}
body{
  color:var(--ink);
  background:radial-gradient(ellipse at 88% 0%,rgba(31,79,174,.25),transparent 40%),#070f22;
}
.site-header{background:rgba(7,15,34,.93);border-bottom:1px solid rgba(133,173,243,.2)}
.nav-links a:hover,.nav-links a.active,.header-actions .lite-link:hover{color:#fff}
.lang-select,.menu-toggle{border-color:rgba(155,187,242,.35);color:#edf3ff;background:#10213e}
.kicker{color:#dfbd86}
.gradient-text,.hero .gradient-text{
  background:linear-gradient(103deg,#f8faff 2%,#92b9ff 46%,#f15c70 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.btn-primary,.hero .btn-primary,.hero-demo button{
  background:linear-gradient(110deg,#ed344f,#c01f46 74%,#325bcd);
  border-color:rgba(240,90,117,.42);
  color:#fff;
  box-shadow:0 9px 26px rgba(182,29,68,.24);
}
.btn-primary:hover,.hero-demo button:hover{
  background:linear-gradient(110deg,#f34862,#d32b52 74%,#446dde);
  box-shadow:0 13px 34px rgba(182,29,68,.32);
}
.btn-ghost{background:rgba(18,39,77,.48);color:#f1f5ff;border-color:rgba(154,185,240,.35)}
.section-heading{max-width:780px}
.section-heading h2,.page-hero h1{line-height:1.15;letter-spacing:-.035em}
.section-heading p,.page-hero p{color:#b7c5d9;line-height:1.8}
.feature-card,.template,.step,.price-card,.faq-list details,
.form-card,.fact-card,.signin-box,.workflow-art,.compare{
  background:linear-gradient(152deg,#162641,#0c172b);
  border:1px solid rgba(141,178,243,.2);
  border-radius:20px;
  box-shadow:0 11px 30px rgba(2,8,24,.12);
}
.feature-card:hover,.template:hover{
  border-color:rgba(120,163,245,.58);
  box-shadow:0 20px 46px rgba(1,9,29,.26);
}
.feature-card h3,.template h3,.price-card h3,.step h3{color:#f8faff}
.feature-card p,.template p,.step p,.price-card p,.faq-list p{color:#b7c6dc}
.feature-icon,.feature-card:nth-child(3n+2) .feature-icon,
.feature-card:nth-child(3n+3) .feature-icon{
  color:#a8c6ff;background:rgba(53,103,214,.17);border-color:rgba(115,161,250,.36);
}
.tag{color:#f0c591;border-color:rgba(213,176,116,.4);background:rgba(213,176,116,.07)}
.price-card.featured{
  background:linear-gradient(145deg,#1a315b,#111d39 70%);
  border-color:rgba(236,68,98,.65);
  box-shadow:0 20px 50px rgba(4,18,50,.3);
}
.step strong{color:#95b9ff}
.faq-list summary:after{color:#dfbd86}
.hero{
  background:radial-gradient(ellipse at 80% 40%,rgba(38,91,194,.19),transparent 57%),
   radial-gradient(ellipse at 10% 70%,rgba(194,35,72,.1),transparent 50%);
}
.hero-demo{border:1px solid rgba(129,170,246,.35);border-radius:20px}
.hero-demo input,.hero-demo select{border-color:rgba(155,184,235,.37)}
.hero-demo input:focus,.hero-demo select:focus{border-color:#7eabff;box-shadow:0 0 0 3px rgba(99,154,255,.2)}
.trust-strip,.showcase,.cta-banner{border-color:rgba(136,178,251,.22)}
.footer{border-top-color:rgba(134,174,246,.18)}
.footer-col a:hover{color:#f2c993}
:where(.feature-grid,.template-grid,.pricing-grid,.steps)>*{min-width:0}
:where(.feature-card,.template,.price-card,.step) {height:100%}
@media(max-width:900px){
  .hero .wrap{gap:30px}
  .hero h1{font-size:clamp(2.75rem,7.8vw,4.7rem);line-height:1.18}
  .page-hero h1{font-size:clamp(2.6rem,7vw,4.1rem)}
}
@media(max-width:620px){
  .wrap{width:min(calc(100% - 36px),var(--max))}
  .hero{padding:44px 0 60px}
  .hero h1{font-size:clamp(2.25rem,10vw,3.1rem);line-height:1.26;margin:17px 0 19px}
  .hero-copy>p{font-size:1rem;line-height:1.75}
  .section-heading h2{font-size:clamp(2rem,8.1vw,2.8rem);line-height:1.2}
  .section-heading p{font-size:.96rem}
  .feature-card,.step,.price-card{padding:22px}
  .hero-demo{padding:15px;margin-top:22px}
  .hero-demo-row{gap:10px}
  .hero-demo input,.hero-demo select,.hero-demo button{width:100%;min-height:48px}
  .hero-demo button{min-height:52px}
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .footer-intro{grid-column:1/-1}
  [dir=rtl] .hero h1{font-size:clamp(2.15rem,9vw,2.9rem);line-height:1.35}
  [dir=rtl] .hero-copy>p{line-height:1.8}
  [dir=rtl] .hero-demo-row>*{min-width:0}
}
@media(max-width:360px){.footer-top{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
 .feature-card,.template,.btn{transition:none;animation:none}
}